script.aculo.us Sorting Elements

Reorder elements (such as items in a list) by dragging them.
script.aculo.us provides extended reordering support out of the box through the Sortable class. The element to become Sortable is passed to the create() method in the Sortable namespace:

A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding Draggables and Droppables.

To use script.aculo.us's Sortable capabilities, you'll need to load the dragdrop module, which requires the effects module also. So your minimum loading for script.aculo.us will look like this:
<script type="text/javascript" src="/javascript/scriptaculous.js?load=effects,dragdrop">
</script>

Syntax: Sortable.create('id_of_container',[options]);

Note: A call to Sortable.create implicitly calls on Sortable.destroy if the referenced element was already a Sortable.
Sortable.destroy( element );

Sortable Options:

Option	Description
tag	Specifies the type of the elements within the sortable container that are to be sortable via drag and drop. Defaults to 'li'.
only	Specifies a CSS class name, or array of class names, that a draggable item must posses in order to be accepted by the drop target. This is similar to the accept option of Draggable. By default, no class name constraints are applied.
overlap	One of false, horizontal or vertical. Controls the point at which a reordering is triggered. Defaults to vertical.
constraint	One of false, horizontal or vertical. Constrains the movement of dragged sortable elements. Defaults to vertical.
containment	Enables dragging and dropping between Sortables. Takes an array of elements or element-ids. Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements.
handle	Same as the Draggable option of the same name, specifying an element to be used to initiate drag operations. By default, each element is its own handle.
hoverclass	Specifies a CSS class name to be applied to non-dragged sortable elements as a dragged element passes over them. By default, no CSS class name is applied.
ghosting	Similar to the Draggable option of the same name, if true, this option causes the original element of a drag operation to stay in place while a semitransparent copy of the element is moved along with the mouse pointer. Defaults to false. This option does not work with IE.
dropOnEmpty	If true, allows sortable elements to be dropped onto an empty list. Defaults to false.
scroll	If the sortable container possesses a scrollbar due to the setting of the CSS overflow attribute, this option enables auto-scrolling of the list beyond the visible elements. Defaults to false.
scrollSensitivity	When scrolling is enabled, adjust the point at which scrolling is triggered. Defaults to 20.
scrollSpeed	When scrolling is enabled, adjust the scroll speed. Defaults to 15.
tree	If true, enables sorting with sub-elements within the sortable element. The default is false.
treeTag	If the tree option is enabled, specifies the container element type of the subelement whose children take part in the sortable behavior. Defaults to 'ul'.

Callbacks options parameter:

Option	Description
onChange	A function that will be called upon whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.
onUpdate	A function that will be called upon the termination of a drag operation that results in a change in element order.

e.g. window.onload = function() {Sortable.create('namelist',{tag:'li'}); }

Where 'namelist' is:

<ul id="namelist">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Botany</li>
<li>Sociology</li>
<li>English</li>
<li>Hindi</li>
<li>Sanskrit</li>
</ul>

Sorting images:

<script type="text/javascript">
window.onload = function() {
Sortable.create('imagelist',{tag:'div'});
}
</script>
<style type="text/css">
div { cursor: move; }
img { border: 1px solid red; margin:5px; }
</style>
</head>
<body>
<p>Drag and drop list images to re-arrange them</p>
<div id="imagelist">
<div><img src="/images/wml_logo.gif" alt="WML Logo" /></div>
<div><img src="/images/javascript.gif" alt="JS" /></div>
<div><img src="/images/html.gif" alt="HTML" /></div>
<div><img src="/images/css.gif" alt="CSS" /></div>
</div>

Serializing the Sortable Elements: The Sortable object also provides a function Sortable.serialize() to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call.
Syntax: Sortable.serialize(element, options);
e.g.: window.onload = function() { Sortable.create('namelist',{tag:'li'});}
function serialize(container, name)
{
$('display').innerHTML =
'Serialization of ' + $(container).id + ' is:

' +

      Sortable.serialize( container,{ name:name} ) + '

';
}

Moving Items between Sortables:
<script type="text/javascript">
window.onload = function() {
Sortable.create('List1',
{containment: ['List1','List2'], dropOnEmpty: true});
Sortable.create('List2',
{containment: ['List1','List2'], dropOnEmpty: true});
}
</script>

<style type="text/css">
li { cursor: move; }
ul { width: 88px; border: 1px solid blue; padding: 3px 3px 3px 20px;}
</style>

<p>Drag and drop list items from one list to another list</p>
<div style="float:left">
<ul id="List1">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Botany</li>
</ul>
</div>
<div style="float:left;margin-left:32px">
<ul id="List2">
<li>Arts</li>
<li>Politics</li>
<li>Economics</li>
<li>History</li>
<li>Sociology</li>
</ul>
</div>

Note that the containment option for each container lists both containers as containment elements. By doing so, we have enabled the child elements to be sorted not only within the context of their parent, but this also enables them to be moved between the two containers.
We set dropOnEmpty to true for both lists. To see the effect this option has on that list, move all the elements from one list into other so that one list is empty. You will find that it is allowing to drop element on empty list.

Binding to Ajax: Of course, onUpdate is a prime candidate for triggering Ajax notifications to the server, for instance when the user reorders a to-do list or some other data set. Combining Ajax.Request and Sortable.serialize makes live persistence simple enough:
window.onload = function()
{
Sortable.create
(
'List' ,
{
onUpdate: function()
{
new Ajax.Request('file.do' , {method: "post", parameters: {data:Sortable.serialize('List')}});
}
}
);
}