Demo

Syntax:

Arguments:

This argument can be an Element, an array of Elements, or a selector. When a single list (or id) is passed, that list will be sortable only with itself.

To enable sorting between lists, one or more lists or id's must be passed using an array or a selector. See Examples below.

options - (object) See options and events below.

Options:

clone - (mixed: defaults to false) Whether or not to display a copy of the actual element under the cursor while dragging. May also be used as a function which will return an element to be used as the clone. The function will receive the mousedown event, the element, and the list as arguments.

handle - (string: defaults to false) A selector to select an element inside each sortable item to be used as the handle for sorting that item. If no match is found, the element is used as its own handle. Cannot be used on buttons, inputs, anchors or textareas.

opacity - (number: defaults to 1) Opacity of the place holding element

revert - (mixed: defaults to false) Whether or not to use an effect to slide the element into its final location after sorting. If you pass an object it will be used as additional options for the revert effect.

sort

Signature:

Arguments:

complete

Fired when the item ends dragging, even if the sort has not changed.

Signature:

onComplete(element)

Arguments:

element - (element) The Element being sorted.

Examples:

var mySortables = new Sortables('list-1', {
revert: { duration: 500, transition: 'elastic:out' }
});
// Creates a new Sortable instance over the list with id 'list-1' with some// extra options for the revert effect.var mySortables = new Sortables('#list-1, #list-2', {
constrain: true,
clone: false,
revert: true
});
// Creates a new Sortable instance allowing the sorting of the lists with// ids 'list-1' and 'list-2' with extra options: since constrain was set to// true, the items will not be able to be dragged from one list to the other.var mySortables = new Sortables('#list-1, #list-2, #list-3');
// Creates a new Sortable instance allowing sorting between the lists with// ids 'list-1', 'list-2, and 'list-3'.

Examples:

See Also:

Function to get the order of the elements in the lists of this sortables instance.
For each list, an array containing the id of all the elements (in the current order) will be returned.
If more than one list is being used, all lists will be serialized and returned in an array.

Syntax:

mySortables.serialize(index[, modifier]);

Arguments:

index - (mixed, optional) An integer or boolean false. This is the zero-based index of the list to serialize. Omit or pass false to serialize all lists.

modifier - (function, optional) A function to override the default output of the sortables. See Examples below.

Examples:

mySortables.serialize(1);
// Returns ids from the second list (remember, index is zero-based):// ['item_1-1', 'item_1-2', 'item_1-3']
mySortables.serialize();
// Returns a nested array of all lists serialized or, if only one list exists, that lists order:/* [['item_1-1', 'item_1-2', 'item_1-3'],
['item_2-1', 'item_2-2', 'item_2-3'],
['item_3-1', 'item_3-2', 'item_3-3']] */
mySortables.serialize(2, function(element, index){
return element.getProperty('id').replace('item_','') + '=' + index;
}).join('&');
// Joins the array with a '&' to return a string of the formatted ids of all the elements in the third list, with their position:// '3-0=0&3-1=1&3-2=2'