http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FScriptaculous%2FSortable
JavaScript DHTML/Scriptaculous/Sortable - История изменений
2026-04-04T13:23:09Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Scriptaculous/Sortable&diff=3634&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:47Z
<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/Scriptaculous/Sortable&diff=3635&oldid=prev
Admin: 1 версия
2010-05-26T07:26:55Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==drag and drop to sort==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html><br />
<head><br />
<title>Draggable demo</title><br />
<br />
<style type="text/css" media="screen"><br />
body {<br />
font-family: "Trebuchet MS", sans-serif;<br />
}<br />
<br />
#container {<br />
width: 200px;<br />
list-style-type: none;<br />
margin-left: 0;<br />
padding-left: 0;<br />
}<br />
<br />
#container li, .foo {<br />
background-color: #f9f9f9;<br />
border: 1px solid #ccc;<br />
padding: 3px 5px;<br />
padding-left: 0;<br />
margin: 10px 0;<br />
}<br />
<br />
#container li .handle {<br />
background-color: #090;<br />
color: #fff;<br />
font-weight: bold;<br />
padding: 3px;<br />
}<br />
<br />
#container, #drop_zone {<br />
width: 200px;<br />
height: 300px;<br />
list-style-type: none;<br />
margin-left: 0;<br />
margin-right: 20px;<br />
float: left;<br />
padding: 0;<br />
border: 2px dashed #999;<br />
} <br />
<br />
</style><br />
<br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript" charset="utf-8"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript" charset="utf-8"></script><br />
<br />
<script type="text/javascript"><br />
document.observe("dom:loaded", function() {<br />
Sortable.create("container", { scroll: window });<br />
});<br />
</script><br />
</head><br />
<body><br />
<br />
<ul id="container"><br />
<li class="foo" id="item_1">Lorem</li><br />
<li class="foo" id="item_2">Ipsum</li><br />
<li class="foo" id="item_3">Dolor</li><br />
<li class="foo" id="item_4">Sit</li><br />
<li class="foo" id="item_5">Amet</li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Horizontally Sortable==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Untitled Document</title><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
Event.observe(window, "load", function() {<br />
Sortable.create("myList", { constraint: "horizontal", overlap: "horizontal" });<br />
});<br />
</script><br />
<style><br />
#myList {<br />
list-style-type: none;<br />
padding: 0;<br />
}<br />
#myList li {<br />
float: left; cursor: move;<br />
margin-left: 1em; padding: 0.2em; width: 10em;<br />
border: 0.05em solid gray; background: #ddd;<br />
text-align: center;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<ol id="myList"><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
<li>E</li><br />
</ol><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortabled list with handlers==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us sortable functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<link rel="stylesheet" href="../test.css" type="text/css" /><br />
<style type="text/css" media="screen"><br />
ul.sortablelist {<br />
list-style-image:none;<br />
list-style-type:none;<br />
margin-top:5px;<br />
margin:0px;<br />
padding:0px;<br />
}<br />
ul.sortabledemo li {<br />
padding:0px;<br />
margin:0px;<br />
}<br />
span.handle {<br />
background-color: #E8A400;<br />
color:white;<br />
cursor: move;<br />
}<br />
li.green {<br />
background-color: #ECF3E1;<br />
border:1px solid #C5DEA1;<br />
cursor: move;<br />
}<br />
li.orange {<br />
border:1px solid #E8A400;<br />
background-color: #FFF4D8;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>script.aculo.us: Two floating sortables with containment and dropOnEmpty</h1><br />
<div style="height:200px;"><br />
<div style="float:left;"><br />
<h3>This is the first list</h3><br />
<ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;"><br />
<li class="green" id="firstlist_firstlist1">Item 1 from first list.</li><br />
<li class="green" id="firstlist_firstlist2">Item 2 from first list.</li><br />
<li class="green" id="firstlist_firstlist3">Item 3 from first list.</li><br />
</ul><br />
</div><br />
<div style="float:left;"><br />
<h3>And now the second list</h3><br />
<ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;"><br />
<li class="orange" id="secondlist_secondlist1"><br />
<span class="handle">DRAG HERE</span> Item 1 from second list.<br />
</li><br />
<li class="orange" id="secondlist_secondlist2"><br />
<span class="handle">DRAG HERE</span> Item 2 from second list.<br />
</li><br />
<li class="orange" id="secondlist_secondlist3"><br />
<span class="handle">DRAG HERE</span> Item 3 from second list.<br />
</li><br />
</ul><br />
</div><br />
</div><br />
<hr style="clear:both" /><br />
<pre id="firstlist_debug"></pre><br />
<pre id="secondlist_debug"></pre><br />
<script type="text/javascript"><br />
<br />
Sortable.create("firstlist",<br />
{dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false,<br />
onChange:function(){$("firstlist_debug").innerHTML = Sortable.serialize("firstlist") }});<br />
Sortable.create("secondlist",<br />
{dropOnEmpty:true,handle:"handle",containment:["firstlist","secondlist"],constraint:false,<br />
onChange:function(){$("secondlist_debug").innerHTML = Sortable.serialize("secondlist") }});<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable is Not just for lists==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Untitled Document</title><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
Event.observe(window, "load", function() {<br />
Sortable.create("chapter", { tag: "p", only: ["orderable", "moveIt"] });<br />
});<br />
</script><br />
</head><br />
<body><br />
<br />
<div id="chapter"><br />
<p>This stays on top.</p><br />
<p class="orderable">Sortable.</p><br />
<p class="orderable">And this too!</p><br />
<p class="moveIt">sortable.</p><br />
<p>This stays at bottom.</p><br />
</div><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable list updated event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us sortable functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<link rel="stylesheet" href="../test.css" type="text/css" /><br />
</head><br />
<body><br />
<br />
<div id="container_div"><br />
<br />
</div><br />
<br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
var new_ul_id = "new_id_123";<br />
var ul = document.createElement("ul");<br />
var ul_id = document.createAttribute("id");<br />
ul_id.nodeValue = new_ul_id;<br />
ul.setAttributeNode(ul_id);<br />
<br />
var li = document.createElement("li");<br />
li.setAttribute("id", "test_1");<br />
li.appendChild(document.createTextNode("blah1"));<br />
ul.appendChild(li);<br />
<br />
var li2 = document.createElement("li");<br />
li2.setAttribute("id", "test_2");<br />
li2.appendChild(document.createTextNode("blah2"));<br />
ul.appendChild(li2);<br />
<br />
$("container_div").appendChild(ul);<br />
<br />
Sortable.create(new_ul_id, { onUpdate: function() { alert(Sortable.serialize("new_id_123")); } });<br />
</script><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable onChange event and onUpdate event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Untitled Document</title><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
Event.observe(window, "load", function() {<br />
var changeEffect;<br />
Sortable.create("myList", {<br />
onChange: function(item) {<br />
var list = Sortable.options(item).element; <br />
alert(Sortable.serialize(list).escapeHTML());<br />
if (changeEffect) changeEffect.cancel();<br />
changeEffect = new Effect.Highlight("changeNotif", { restorecolor: "transparent" });<br />
},<br />
onUpdate: function(list) {<br />
alert(Sortable.serialize(list).escapeHTML());<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<ol id="myList"><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
<li>E</li><br />
</ol><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable two-lists==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us sortable functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<link rel="stylesheet" href="../test.css" type="text/css" /><br />
<style type="text/css" media="screen"><br />
ul { height: 100px; border:1px dotted #888; }<br />
</style><br />
</head><br />
<body><br />
<h1>script.aculo.us Sortable two-lists w/ dropOnEmpty functional test file</h1><br />
<ul id="thelist1"><br />
<li id="thelist1_1">Hey there! I"m item#1/1</li><br />
<li id="thelist1_2">Hey there! I"m item#1/2</li><br />
<li id="thelist1_3">Hey there! I"m item#1/3</li><br />
</ul><br />
<ul id="thelist2"><br />
</ul><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
Sortable.create("thelist1",{containment:["thelist1","thelist2"], dropOnEmpty:true});<br />
Sortable.create("thelist2",{containment:["thelist1","thelist2"], dropOnEmpty:true});<br />
</script><br />
<a href="#" onclick="alert(Sortable.serialize("thelist1"));return false;">Serialize sortable1</a><br />
<a href="#" onclick="alert(Sortable.serialize("thelist2"));return false;">Serialize sortable2</a><br />
<div id="debug"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sortable with ghosting effects==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>script.aculo.us Sortable ghosting functional test file</title><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<link rel="stylesheet" href="../test.css" type="text/css" /><br />
<style><br />
ul.testlist { <br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
ul.testlist li {<br />
width:200px;<br />
font:12px Verdana;<br />
padding:4px;<br />
cursor:move;<br />
}<br />
ul.testlist li.over {<br />
background-color:#fcb;<br />
}<br />
ul.testlist li img {<br />
float:left;<br />
margin-right:8px;<br />
}<br />
div.dropmarker {<br />
height:6px;<br />
width:200px;<br />
background: url(dropmarker.png) left top;<br />
margin-top:-3px;<br />
margin-left:-5px;<br />
z-index:1000;<br />
overflow: hidden;<br />
}<br />
#testlist4 li {<br />
float:left;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>script.aculo.us Sortable ghosting functional test file</h1><br />
<h2>Ghosting</h2><br />
<ul id="testlist" class="testlist"><br />
<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li><br />
<li id="item_2"><img src="icon.png" alt=""/> sit amet</li><br />
<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li><br />
<li id="item_4"><img src="icon.png" alt=""/> elit</li><br />
<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li><br />
<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li><br />
<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li><br />
<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li><br />
</ul><br />
<p id="testlist_serialize">(waiting for onChange)</p><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
Sortable.create("testlist",{ghosting:true,constraint:false,hoverclass:"over",<br />
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},<br />
onChange:function(element){$("testlist_serialize").innerHTML = Sortable.serialize(element.parentNode)}<br />
});<br />
</script><br />
<h2>No ghosting</h2><br />
<ul id="testlist2" class="testlist"><br />
<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li><br />
<li id="item_10"><img src="icon.png" alt=""/> sit amet</li><br />
<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li><br />
<li id="item_12"><img src="icon.png" alt=""/> elit</li><br />
<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li><br />
<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li><br />
<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li><br />
<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li><br />
</ul><br />
<p id="testlist2_serialize">(waiting for onChange)</p><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
Sortable.create("testlist2",{ghosting:false,constraint:false,hoverclass:"over",<br />
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},<br />
onChange:function(element){$("testlist2_serialize").innerHTML = Sortable.serialize(element.parentNode)}<br />
});<br />
</script><br />
<h2>Ghosting (inside position:relative container)</h2><br />
<div style="position:relative;left:100px;top:-5px;"><br />
<ul id="testlist3" class="testlist"><br />
<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li><br />
<li id="item_18"><img src="icon.png" alt=""/> sit amet</li><br />
<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li><br />
<li id="item_20"><img src="icon.png" alt=""/> elit</li><br />
<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li><br />
<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li><br />
<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li><br />
<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li><br />
</ul><br />
</div><br />
<p id="testlist3_serialize">(waiting for onChange)</p><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
Sortable.create("testlist3",{ghosting:true,constraint:false,<br />
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},<br />
onChange:function(element){$("testlist3_serialize").innerHTML = Sortable.serialize(element.parentNode)}<br />
});<br />
</script><br />
<br />
<h2>Ghosting (inside position:relative container)</h2><br />
<div style="position:relative;left:100px;top:-5px;"><br />
<ul id="testlist4" class="testlist"><br />
<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li><br />
<li id="item_418"><img src="icon.png" alt=""/> sit amet</li><br />
<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li><br />
<li id="item_420"><img src="icon.png" alt=""/> elit</li><br />
<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li><br />
<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li><br />
<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li><br />
<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li><br />
</ul><br />
</div><br />
<p id="testlist4_serialize">(waiting for onChange)</p><br />
<script type="text/javascript" language="javascript" charset="utf-8"><br />
Sortable.create("testlist4",{overlap:"horizontal",ghosting:true,constraint:false,<br />
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},<br />
onChange:function(element){$("testlist4_serialize").innerHTML = Sortable.serialize(element.parentNode)}<br />
});<br />
</script><br />
<br />
<div id="debug"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Sort and reorder the ordered list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Untitled Document</title><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
Event.observe(window, "load", function() {<br />
Sortable.create("guys");<br />
});<br />
</script><br />
</head><br />
<body><br />
<ol id="guys"><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
<li>E</li><br />
</ol></body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Two sortable groups==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Untitled Document</title><br />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script><br />
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
Event.observe(window, "load", function() {<br />
var options = {<br />
constraint: false, containment: ["myList", "myList2"],<br />
dropOnEmpty: true, onUpdate: function(list) {<br />
var methodStart = list.down("li") ? "remove" : "add";<br />
list[methodStart + "ClassName"]("empty");<br />
}<br />
};<br />
Sortable.create("myList", options);<br />
Sortable.create("myList2", options);<br />
});<br />
</script><br />
</head><br />
<body><br />
<ul id="myList"><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
</ul><br />
<ul id="myList2"><br />
<li>D</li><br />
<li>E</li><br />
<li>F</li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source></div>
Admin