Sortable Widgetversion added: 1.0
Description: Reorder elements in a list or grid using the mouse.
Options
appendToType: jQuery or Element or Selector or String
"parent"
- jQuery: A jQuery object containing the element to append the helper to.
- Element: The element to append the helper to.
- Selector: A selector specifying which element to append the helper to.
- 
String: The string "parent"will cause the helper to be a sibling of the sortable item.
axisType: String
false
"x", "y".cancelType: Selector
":input,button"
connectWithType: Selector
false
connectWith option must be set on both sortable elements.containmentType: Element or Selector or String
false
Defines a bounding box that the sortable items are contrained to while dragging.
Note: The element specified for containment must have a calculated width and height (though it need not be explicit). For example, if you have float: left sortable children and specify containment: "parent" be sure to have float: left on the sortable/parent container as well or it will have height: 0, causing undefined behavior.
- Element: An element to use as the container.
- Selector: A selector specifying an element to use as the container.
- 
String: A string identifying an element to use as the container. Possible values: "parent","document","window".
cursorAtType: Object
false
{ top, left, right, bottom }.delayType: Integer
0
disabledType: Boolean
false
true.Initialize the sortable with the disabled option specified:
| $( ".selector").sortable({ disabled: true}); | 
Get or set the disabled option, after initialization:
| // gettervardisabled = $( ".selector").sortable( "option", "disabled");// setter$( ".selector").sortable( "option", "disabled", true); | 
distanceType: Number
1
dropOnEmptyType: Boolean
true
false, items from this sortable can't be dropped on an empty connect sortable (see the connectWith option.gridType: Array
false
[ x, y ].helperType: String or Function()
"original"
- 
String: If set to "clone", then the element will be cloned and the clone will be dragged.
- Function: A function that will return a DOMElement to use while dragging. The function receives the event and the element being sorted.
revertType: Boolean or Number
false
- 
Boolean: When set to true, the items will animate with the default duration.
- Number: The duration for the animation, in milliseconds.
scrollSensitivityType: Number
20
scrollSpeedType: Number
20
scrollSensitivity distance.toleranceType: String
"intersect"
- 
"intersect": The item overlaps the other item by at least 50%.
- 
"pointer": The mouse pointer overlaps the other item.
Methods
cancel()
- This method does not accept any arguments.
destroy()
- This method does not accept any arguments.
disable()
- This method does not accept any arguments.
enable()
- This method does not accept any arguments.
option( optionName ) Returns: Object
optionName.- 
optionNameType: StringThe name of the option to get.
option() Returns: PlainObject
- This method does not accept any arguments.
option( optionName, value )
optionName.option( options )
- 
optionsType: ObjectA map of option-value pairs to set.
refresh()
- This method does not accept any arguments.
refreshPositions()
- This method does not accept any arguments.
serialize( options )
Serializes the sortable's item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.
It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".
Note: If serialize returns an empty string, make sure the id attributes include an underscore.  They must be in the form: "set_number" For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2". You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".
toArray()
- This method does not accept any arguments.
widget() Returns: jQuery
jQuery object containing the sortable element.
	- This method does not accept any arguments.
Events
activate( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
beforeStop( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
change( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
deactivate( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
out( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
over( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
receive( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
remove( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
sort( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
start( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
stop( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
update( event, ui )
- 
eventType: Event
- 
uiType: Object- 
helperType: jQueryThe jQuery object representing the helper being sorted
- 
itemType: jQueryThe jQuery object representing the current dragged element
- 
offsetType: ObjectThe current absolute position of the helper represented as{ top, left }
- 
positionType: ObjectThe current position of the helper represented as{ top, left }
- 
originalPositionType: ObjectThe original position of the element represented as{ top, left }
- 
senderType: jQueryThe sortable that the item comes from if moving from one sortable to another
 
- 
The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.
Note: In order to sort table rows, the tbody must be made sortable, not the table.
Example:
A simple jQuery UI Sortable.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html><htmllang="en"><head>    <metacharset="utf-8">    <title>sortable demo</title></head><body><ulid="sortable">    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>    <li>Item 4</li>    <li>Item 5</li></ul><script>$("#sortable").sortable();</script></body></html> |