Behaviours > Sortable

A Sortable is a quick way to initialize many Draggable elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding draggable Droppables.


Use Sortable.create('id_of_container',[options]); to create new Sortables. See Sortable.create. Furthermore, there are special requirements to get sortables to work in FF3 which are also covered in Sortable.create.


Property/Method Description
(RegExp) /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/
sortables (Object) { }
options (element) Internal function
destroy (element) Destroys sortable
create (element, options) Creates sortable
findElements (element, options) Internal function
onHover (element, dropon, overlap) Internal function, which may be overridden through the options parameter on creation
onEmptyHover (element, dropon, overlap) Internal function
unmark() Internal function
mark() Internal function
tree (element)
sequence (element)
setSequence (element, new_sequence)
serialize (element)


See Sortable Lists Demo.

Creating sortables

See Sortable.create.

Disabling sortables

  Sortable.destroy( element );

A call to Sortable.create implicitly calls Sortable.destroy if the referenced element was already a Sortable.


Function Description
Sortable.serialize The Sortable object also provides a function 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. See Sortable.serialize
Sortable.sequence The Sortable object also provides a function to get the values in an sequence array object. See Sortable.sequence


Use PHP and Ajax call to interact with Sortable

A short tutorial on using Sortables prepared for the Linux Users Group, Villafranca, Italy.