http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2FUI_Sortable
JavaScript DHTML/jQuery/UI Sortable - История изменений
2026-04-04T13:10:58Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/UI_Sortable&diff=2924&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/UI_Sortable&diff=2925&oldid=prev
Admin: 1 версия
2010-05-26T07:24:00Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==jQuery UI Sortable - Connect lists==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Connect lists</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }<br />
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable1, #sortable2").sortable({<br />
connectWith: ".connectedSortable"<br />
}).disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable1" class="connectedSortable"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default">Item 2</li><br />
<li class="ui-state-default">Item 3</li><br />
<li class="ui-state-default">Item 4</li><br />
<li class="ui-state-default">Item 5</li><br />
</ul><br />
<ul id="sortable2" class="connectedSortable"><br />
<li class="ui-state-highlight">Item 1</li><br />
<li class="ui-state-highlight">Item 2</li><br />
<li class="ui-state-highlight">Item 3</li><br />
<li class="ui-state-highlight">Item 4</li><br />
<li class="ui-state-highlight">Item 5</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Sort items from one list into another and vice versa, by passing a selector into<br />
the <code>connectWith</code> option. The simplest way to do this is to<br />
group all related lists with a CSS class, and then pass that class into the<br />
sortable function (i.e., <code>connectWith: ".myclass"</code>).<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Connect lists with Tabs==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Connect lists with Tabs</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.tabs.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable1, #sortable2").sortable().disableSelection();<br />
var $tabs = $("#tabs").tabs();<br />
var $tab_items = $("ul:first li",$tabs).droppable({<br />
accept: ".connectedSortable li",<br />
hoverClass: "ui-state-hover",<br />
drop: function(ev, ui) {<br />
var $item = $(this);<br />
var $list = $($item.find("a").attr("href")).find(".connectedSortable");<br />
ui.draggable.hide("slow", function() {<br />
$tabs.tabs("select", $tab_items.index($item));<br />
$(this).appendTo($list).show("slow");<br />
});<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<div id="tabs"><br />
<ul><br />
<li><a href="#tabs-1">Nunc tincidunt</a></li><br />
<li><a href="#tabs-2">Proin dolor</a></li><br />
</ul><br />
<div id="tabs-1"><br />
<ul id="sortable1" class="connectedSortable ui-helper-reset"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default">Item 2</li><br />
<li class="ui-state-default">Item 3</li><br />
<li class="ui-state-default">Item 4</li><br />
<li class="ui-state-default">Item 5</li><br />
</ul><br />
</div><br />
<div id="tabs-2"><br />
<ul id="sortable2" class="connectedSortable ui-helper-reset"><br />
<li class="ui-state-highlight">Item 1</li><br />
<li class="ui-state-highlight">Item 2</li><br />
<li class="ui-state-highlight">Item 3</li><br />
<li class="ui-state-highlight">Item 4</li><br />
<li class="ui-state-highlight">Item 5</li><br />
</ul><br />
</div><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Default functionality==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Default functionality</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }<br />
#sortable li span { position: absolute; margin-left: -1.3em; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable").sortable();<br />
$("#sortable").disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable"><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Enable a group of DOM elements to be sortable. Click on and drag an<br />
element to a new spot within the list, and the other items will adjust to<br />
fit. By default, sortable items share <code>draggable</code> properties.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Delay start==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Delay start</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }<br />
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable1").sortable({<br />
delay: 300<br />
});<br />
<br />
$("#sortable2").sortable({<br />
distance: 15<br />
});<br />
$("li").disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<h3 class="docs">Time delay of 300ms:</h3><br />
<ul id="sortable1"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default">Item 2</li><br />
<li class="ui-state-default">Item 3</li><br />
<li class="ui-state-default">Item 4</li><br />
</ul><br />
<h3 class="docs">Distance delay of 15px:</h3><br />
<ul id="sortable2"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default">Item 2</li><br />
<li class="ui-state-default">Item 3</li><br />
<li class="ui-state-default">Item 4</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Prevent accidental sorting either by delay (time) or distance. Set a number of<br />
milliseconds the element needs to be dragged before sorting starts<br />
with the <code>delay</code> option. Set a distance in pixels the element<br />
needs to be dragged before sorting starts with the <code>distance</code><br />
option.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Display as grid==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Display as grid</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable { list-style-type: none; margin: 0; padding: 0; }<br />
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable").sortable();<br />
$("#sortable").disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable"><br />
<li class="ui-state-default">1</li><br />
<li class="ui-state-default">2</li><br />
<li class="ui-state-default">3</li><br />
<li class="ui-state-default">4</li><br />
<li class="ui-state-default">5</li><br />
<li class="ui-state-default">6</li><br />
<li class="ui-state-default">7</li><br />
<li class="ui-state-default">8</li><br />
<li class="ui-state-default">9</li><br />
<li class="ui-state-default">10</li><br />
<li class="ui-state-default">11</li><br />
<li class="ui-state-default">12</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
To arrange sortable items as a grid, give them identical dimensions and<br />
float them using CSS.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Drop placeholder==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Drop placeholder</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }<br />
html>body #sortable li { height: 1.5em; line-height: 1.2em; }<br />
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable").sortable({<br />
placeholder: "ui-state-highlight"<br />
});<br />
$("#sortable").disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default">Item 2</li><br />
<li class="ui-state-default">Item 3</li><br />
<li class="ui-state-default">Item 4</li><br />
<li class="ui-state-default">Item 5</li><br />
<li class="ui-state-default">Item 6</li><br />
<li class="ui-state-default">Item 7</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
When dragging a sortable item to a new location, other items will make room<br />
for the that item by shifting to allow white space between them. Pass a<br />
class into the <code>placeholder</code> option to style that space to<br />
be visible. Use the boolean <code>forcePlaceholderSize</code> option<br />
to set dimensions on the placeholder.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Handle empty lists==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Handle empty lists</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}<br />
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("ul.droptrue").sortable({<br />
connectWith: "ul"<br />
});<br />
$("ul.dropfalse").sortable({<br />
connectWith: "ul",<br />
dropOnEmpty: false<br />
});<br />
$("#sortable1, #sortable2, #sortable3").disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable1" class="droptrue"><br />
<li class="ui-state-default">Can be dropped..</li><br />
<li class="ui-state-default">..on an empty list</li><br />
<li class="ui-state-default">Item 3</li><br />
<li class="ui-state-default">Item 4</li><br />
<li class="ui-state-default">Item 5</li><br />
</ul><br />
<ul id="sortable2" class="dropfalse"><br />
<li class="ui-state-highlight">Cannot be dropped..</li><br />
<li class="ui-state-highlight">..on an empty list</li><br />
<li class="ui-state-highlight">Item 3</li><br />
<li class="ui-state-highlight">Item 4</li><br />
<li class="ui-state-highlight">Item 5</li><br />
</ul><br />
<ul id="sortable3" class="droptrue"><br />
</ul><br />
<br clear="both" /><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Prevent all items in a list from being dropped into a separate, empty list<br />
using the <code>dropOnEmpty</code> option set to <code>false</code>. By default,<br />
sortable items can be dropped on empty lists.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Include / exclude items==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Include / exclude items</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }<br />
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#sortable1").sortable({<br />
items: "li:not(.ui-state-disabled)"<br />
});<br />
$("#sortable2").sortable({<br />
cancel: ".ui-state-disabled"<br />
});<br />
$("#sortable1 li, #sortable2 li").disableSelection(); <br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<h3 class="docs">Specify which items are sortable:</h3><br />
<ul id="sortable1"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default ui-state-disabled">(I"m not sortable or a drop target)</li><br />
<li class="ui-state-default ui-state-disabled">(I"m not sortable or a drop target)</li><br />
<li class="ui-state-default">Item 4</li><br />
</ul><br />
<h3 class="docs">Cancel sorting (but keep as drop targets):</h3><br />
<ul id="sortable2"><br />
<li class="ui-state-default">Item 1</li><br />
<li class="ui-state-default ui-state-disabled">(I"m not sortable)</li><br />
<li class="ui-state-default ui-state-disabled">(I"m not sortable)</li><br />
<li class="ui-state-default">Item 4</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Specify which items are eligible to sort by passing a jQuery selector into<br />
the <code>items</code> option. Items excluded from this option are not<br />
sortable, nor are they valid targets for sortable items.<br />
</p><br />
<p><br />
To only prevent sorting on certain items, pass a jQuery selector into the<br />
<code>cancel</code> option. Cancelled items remain valid sort targets for<br />
others.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Sortable - Portlets==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Portlets</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
.column { width: 170px; float: left; padding-bottom: 100px; }<br />
.portlet { margin: 0 1em 1em 0; }<br />
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }<br />
.portlet-header .ui-icon { float: right; }<br />
.portlet-content { padding: 0.4em; }<br />
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }<br />
.ui-sortable-placeholder * { visibility: hidden; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$(".column").sortable({<br />
connectWith: ".column"<br />
});<br />
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")<br />
.find(".portlet-header")<br />
.addClass("ui-widget-header ui-corner-all")<br />
.prepend("<span class="ui-icon ui-icon-plusthick"></span>")<br />
.end()<br />
.find(".portlet-content");<br />
$(".portlet-header .ui-icon").click(function() {<br />
$(this).toggleClass("ui-icon-minusthick");<br />
$(this).parents(".portlet:first").find(".portlet-content").toggle();<br />
});<br />
$(".column").disableSelection();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<div class="column"><br />
<div class="portlet"><br />
<div class="portlet-header">Feeds</div><br />
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div><br />
</div><br />
<br />
<div class="portlet"><br />
<div class="portlet-header">News</div><br />
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div><br />
</div><br />
</div><br />
<div class="column"><br />
<div class="portlet"><br />
<div class="portlet-header">Shopping</div><br />
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div><br />
</div><br />
</div><br />
<div class="column"><br />
<div class="portlet"><br />
<div class="portlet-header">Links</div><br />
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div><br />
</div><br />
<br />
<div class="portlet"><br />
<div class="portlet-header">Images</div><br />
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div><br />
</div><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Enable portlets (styled divs) as sortables and use the <code>connectWith</code><br />
option to allow sorting between columns.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Placehoder, helper for sortable==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script> <br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("ul").sortable({<br />
placeholder: "tmpPlaceholder",<br />
helper: function(e, element) {<br />
return $(element).clone().addClass("tmpHelper");<br />
},<br />
update : function(e, ui) {<br />
alert("updated");<br />
}<br />
});<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
}<br />
li.tmpPlaceholder {<br />
height: 22px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Set containment to the container and distance to 30==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Default functionality</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }<br />
#sortable li span { position: absolute; margin-left: -1.3em; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
var sortOpts = {<br />
axis: "y",<br />
containment: "#container",<br />
cursor: "move",<br />
distance: 30<br />
};<br />
<br />
//make specified element sortable<br />
$("#sortable").sortable(sortOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable"><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li><br />
</ul><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p><br />
Enable a group of DOM elements to be sortable. Click on and drag an<br />
element to a new spot within the list, and the other items will adjust to<br />
fit. By default, sortable items share <code>draggable</code> properties.<br />
</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==sortable helperMaker==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Default functionality</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }<br />
#sortable li span { position: absolute; margin-left: -1.3em; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
var sortOpts = {<br />
helper: helperMaker<br />
};<br />
<br />
function helperMaker(e, ui) {<br />
<br />
return $("<div>").css({<br />
border:"4px solid #cccccc",<br />
opacity:"0.5"<br />
});<br />
}<br />
<br />
<br />
$("#sortable").sortable(sortOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable"><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==sortable placeholder: "empty"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Sortable - Default functionality</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }<br />
#sortable li span { position: absolute; margin-left: -1.3em; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
var sortOpts = {<br />
placeholder: "empty"<br />
};<br />
<br />
$("#sortable").sortable(sortOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ul id="sortable"><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li><br />
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable update event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script> <br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("ul").sortable({<br />
placeholder: "tmpPlaceholder",<br />
helper: function(e, element) {<br />
return $(element).clone().addClass("tmpHelper");<br />
},<br />
update : function(e, ui) {<br />
alert("updated");<br />
}<br />
});<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
}<br />
li.tmpPlaceholder {<br />
height: 22px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable with place holder==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.sortable.js"></script> <br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("ul").sortable({<br />
placeholder: "tmpPlaceholder",<br />
helper: function(e, element) {<br />
return $(element).clone().addClass("tmpHelper");<br />
}<br />
});<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
}<br />
li {<br />
background: rgb(218, 191, 162);<br />
padding: 3px;<br />
width: 244px;<br />
}<br />
li.tmpPlaceholder {<br />
background: rgb(110, 159, 128);<br />
height: 22px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source></div>
Admin