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:
// gettervar disabled = $( ".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><html lang="en"><head> <meta charset="utf-8"> <title>sortable demo</title></head><body><ul id="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> |