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.
Initialize the sortable with the appendTo option specified:
$( ".selector" ).sortable({ appendTo: document.body }); |
Get or set the appendTo option, after initialization:
// gettervar appendTo = $( ".selector" ).sortable( "option", "appendTo" );// setter$( ".selector" ).sortable( "option", "appendTo", document.body ); |
axisType: String
false
"x", "y".Initialize the sortable with the axis option specified:
$( ".selector" ).sortable({ axis: "x" }); |
Get or set the axis option, after initialization:
// gettervar axis = $( ".selector" ).sortable( "option", "axis" );// setter$( ".selector" ).sortable( "option", "axis", "x" ); |
cancelType: Selector
":input,button"
Initialize the sortable with the cancel option specified:
$( ".selector" ).sortable({ cancel: "a,button" }); |
Get or set the cancel option, after initialization:
// gettervar cancel = $( ".selector" ).sortable( "option", "cancel" );// setter$( ".selector" ).sortable( "option", "cancel", "a,button" ); |
connectWithType: Selector
false
connectWith option must be set on both sortable elements.Initialize the sortable with the connectWith option specified:
$( ".selector" ).sortable({ connectWith: "#shopping-cart" }); |
Get or set the connectWith option, after initialization:
// gettervar connectWith = $( ".selector" ).sortable( "option", "connectWith" );// setter$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" ); |
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".
Initialize the sortable with the containment option specified:
$( ".selector" ).sortable({ containment: "parent" }); |
Get or set the containment option, after initialization:
// gettervar containment = $( ".selector" ).sortable( "option", "containment" );// setter$( ".selector" ).sortable( "option", "containment", "parent" ); |
cursorType: String
"auto"
Initialize the sortable with the cursor option specified:
$( ".selector" ).sortable({ cursor: "move" }); |
Get or set the cursor option, after initialization:
// gettervar cursor = $( ".selector" ).sortable( "option", "cursor" );// setter$( ".selector" ).sortable( "option", "cursor", "move" ); |
cursorAtType: Object
false
{ top, left, right, bottom }.Initialize the sortable with the cursorAt option specified:
$( ".selector" ).sortable({ cursorAt: { left: 5 } }); |
Get or set the cursorAt option, after initialization:
// gettervar cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );// setter$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); |
delayType: Integer
0
Initialize the sortable with the delay option specified:
$( ".selector" ).sortable({ delay: 150 }); |
Get or set the delay option, after initialization:
// gettervar delay = $( ".selector" ).sortable( "option", "delay" );// setter$( ".selector" ).sortable( "option", "delay", 150 ); |
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
Initialize the sortable with the distance option specified:
$( ".selector" ).sortable({ distance: 5 }); |
Get or set the distance option, after initialization:
// gettervar distance = $( ".selector" ).sortable( "option", "distance" );// setter$( ".selector" ).sortable( "option", "distance", 5 ); |
dropOnEmptyType: Boolean
true
false, items from this sortable can't be dropped on an empty connect sortable (see the connectWith option.Initialize the sortable with the dropOnEmpty option specified:
$( ".selector" ).sortable({ dropOnEmpty: false }); |
Get or set the dropOnEmpty option, after initialization:
// gettervar dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );// setter$( ".selector" ).sortable( "option", "dropOnEmpty", false ); |
forceHelperSizeType: Boolean
false
true, forces the helper to have a size.Initialize the sortable with the forceHelperSize option specified:
$( ".selector" ).sortable({ forceHelperSize: true }); |
Get or set the forceHelperSize option, after initialization:
// gettervar forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );// setter$( ".selector" ).sortable( "option", "forceHelperSize", true ); |
forcePlaceholderSizeType: Boolean
false
Initialize the sortable with the forcePlaceholderSize option specified:
$( ".selector" ).sortable({ forcePlaceholderSize: true }); |
Get or set the forcePlaceholderSize option, after initialization:
// gettervar forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );// setter$( ".selector" ).sortable( "option", "forcePlaceholderSize", true ); |
gridType: Array
false
[ x, y ].Initialize the sortable with the grid option specified:
$( ".selector" ).sortable({ grid: [ 20, 10 ] }); |
Get or set the grid option, after initialization:
// gettervar grid = $( ".selector" ).sortable( "option", "grid" );// setter$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] ); |
handleType: Selector or Element
false
Initialize the sortable with the handle option specified:
$( ".selector" ).sortable({ handle: ".handle" }); |
Get or set the handle option, after initialization:
// gettervar handle = $( ".selector" ).sortable( "option", "handle" );// setter$( ".selector" ).sortable( "option", "handle", ".handle" ); |
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.
Initialize the sortable with the helper option specified:
$( ".selector" ).sortable({ helper: "clone" }); |
Get or set the helper option, after initialization:
// gettervar helper = $( ".selector" ).sortable( "option", "helper" );// setter$( ".selector" ).sortable( "option", "helper", "clone" ); |
itemsType: Selector
"> *"
Initialize the sortable with the items option specified:
$( ".selector" ).sortable({ items: "> li" }); |
Get or set the items option, after initialization:
// gettervar items = $( ".selector" ).sortable( "option", "items" );// setter$( ".selector" ).sortable( "option", "items", "> li" ); |
opacityType: Number
false
0.01 to 1.Initialize the sortable with the opacity option specified:
$( ".selector" ).sortable({ opacity: 0.5 }); |
Get or set the opacity option, after initialization:
// gettervar opacity = $( ".selector" ).sortable( "option", "opacity" );// setter$( ".selector" ).sortable( "option", "opacity", 0.5 ); |
placeholderType: String
false
Initialize the sortable with the placeholder option specified:
$( ".selector" ).sortable({ placeholder: "sortable-placeholder" }); |
Get or set the placeholder option, after initialization:
// gettervar placeholder = $( ".selector" ).sortable( "option", "placeholder" );// setter$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" ); |
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.
Initialize the sortable with the revert option specified:
$( ".selector" ).sortable({ revert: true }); |
Get or set the revert option, after initialization:
// gettervar revert = $( ".selector" ).sortable( "option", "revert" );// setter$( ".selector" ).sortable( "option", "revert", true ); |
scrollType: Boolean
true
Initialize the sortable with the scroll option specified:
$( ".selector" ).sortable({ scroll: false }); |
Get or set the scroll option, after initialization:
// gettervar scroll = $( ".selector" ).sortable( "option", "scroll" );// setter$( ".selector" ).sortable( "option", "scroll", false ); |
scrollSensitivityType: Number
20
Initialize the sortable with the scrollSensitivity option specified:
$( ".selector" ).sortable({ scrollSensitivity: 10 }); |
Get or set the scrollSensitivity option, after initialization:
// gettervar scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );// setter$( ".selector" ).sortable( "option", "scrollSensitivity", 10 ); |
scrollSpeedType: Number
20
scrollSensitivity distance.Initialize the sortable with the scrollSpeed option specified:
$( ".selector" ).sortable({ scrollSpeed: 40 }); |
Get or set the scrollSpeed option, after initialization:
// gettervar scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );// setter$( ".selector" ).sortable( "option", "scrollSpeed", 40 ); |
toleranceType: String
"intersect"
-
"intersect": The item overlaps the other item by at least 50%. -
"pointer": The mouse pointer overlaps the other item.
Initialize the sortable with the tolerance option specified:
$( ".selector" ).sortable({ tolerance: "pointer" }); |
Get or set the tolerance option, after initialization:
// gettervar tolerance = $( ".selector" ).sortable( "option", "tolerance" );// setter$( ".selector" ).sortable( "option", "tolerance", "pointer" ); |
zIndexType: Integer
1000
Initialize the sortable with the zIndex option specified:
$( ".selector" ).sortable({ zIndex: 9999 }); |
Get or set the zIndex option, after initialization:
// gettervar zIndex = $( ".selector" ).sortable( "option", "zIndex" );// setter$( ".selector" ).sortable( "option", "zIndex", 9999 ); |
Methods
cancel()
- This method does not accept any arguments.
Invoke the cancel method:
$( ".selector" ).sortable( "cancel" ); |
destroy()
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).sortable( "destroy" ); |
disable()
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).sortable( "disable" ); |
enable()
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).sortable( "enable" ); |
option( optionName ) Returns: Object
optionName.-
optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).sortable( "option", "disabled" ); |
option() Returns: PlainObject
- This method does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).sortable( "option" ); |
option( optionName, value )
optionName.Invoke the method:
$( ".selector" ).sortable( "option", "disabled", true ); |
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).sortable( "option", { disabled: true } ); |
refresh()
- This method does not accept any arguments.
Invoke the refresh method:
$( ".selector" ).sortable( "refresh" ); |
refreshPositions()
- This method does not accept any arguments.
Invoke the refreshPositions method:
$( ".selector" ).sortable( "refreshPositions" ); |
serialize( options ) Returns: String
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".
-
optionsType: ObjectOptions to customize the serialization.
-
key (default:
the part of the attribute in front of the separator)Type: StringReplacespart1[]with the specified value. -
attribute (default:
"id")Type: StringThe name of the attribute to use for the values. -
expression (default:
/(.+)[-=_](.+)/)Type: RegExpA regular expression used to split the attribute value into key and value parts.
-
Invoke the serialize method:
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } ); |
toArray() Returns: Array
- This method does not accept any arguments.
Invoke the toArray method:
var sortedIDs = $( ".selector" ).sortable( "toArray" ); |
widget() Returns: jQuery
jQuery object containing the sortable element.
- This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).sortable( "widget" ); |
Events
activate( event, ui )Type: sortactivate
-
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
-
Initialize the sortable with the activate callback specified:
$( ".selector" ).sortable({ activate: function( event, ui ) {}}); |
Bind an event listener to the sortactivate event:
$( ".selector" ).on( "sortactivate", function( event, ui ) {} ); |
beforeStop( event, ui )Type: sortbeforestop
-
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
-
Initialize the sortable with the beforeStop callback specified:
$( ".selector" ).sortable({ beforeStop: function( event, ui ) {}}); |
Bind an event listener to the sortbeforestop event:
$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} ); |
change( event, ui )Type: sortchange
-
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
-
Initialize the sortable with the change callback specified:
$( ".selector" ).sortable({ change: function( event, ui ) {}}); |
Bind an event listener to the sortchange event:
$( ".selector" ).on( "sortchange", function( event, ui ) {} ); |
create( event, ui )Type: sortcreate
Initialize the sortable with the create callback specified:
$( ".selector" ).sortable({ create: function( event, ui ) {}}); |
Bind an event listener to the sortcreate event:
$( ".selector" ).on( "sortcreate", function( event, ui ) {} ); |
deactivate( event, ui )Type: sortdeactivate
-
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
-
Initialize the sortable with the deactivate callback specified:
$( ".selector" ).sortable({ deactivate: function( event, ui ) {}}); |
Bind an event listener to the sortdeactivate event:
$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} ); |
out( event, ui )Type: sortout
-
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
-
Initialize the sortable with the out callback specified:
$( ".selector" ).sortable({ out: function( event, ui ) {}}); |
Bind an event listener to the sortout event:
$( ".selector" ).on( "sortout", function( event, ui ) {} ); |
over( event, ui )Type: sortover
-
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
-
Initialize the sortable with the over callback specified:
$( ".selector" ).sortable({ over: function( event, ui ) {}}); |
Bind an event listener to the sortover event:
$( ".selector" ).on( "sortover", function( event, ui ) {} ); |
receive( event, ui )Type: sortreceive
-
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
-
Initialize the sortable with the receive callback specified:
$( ".selector" ).sortable({ receive: function( event, ui ) {}}); |
Bind an event listener to the sortreceive event:
$( ".selector" ).on( "sortreceive", function( event, ui ) {} ); |
remove( event, ui )Type: sortremove
-
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
-
Initialize the sortable with the remove callback specified:
$( ".selector" ).sortable({ remove: function( event, ui ) {}}); |
Bind an event listener to the sortremove event:
$( ".selector" ).on( "sortremove", function( event, ui ) {} ); |
sort( event, ui )Type: sort
-
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
-
Initialize the sortable with the sort callback specified:
$( ".selector" ).sortable({ sort: function( event, ui ) {}}); |
Bind an event listener to the sort event:
$( ".selector" ).on( "sort", function( event, ui ) {} ); |
start( event, ui )Type: sortstart
-
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
-
Initialize the sortable with the start callback specified:
$( ".selector" ).sortable({ start: function( event, ui ) {}}); |
Bind an event listener to the sortstart event:
$( ".selector" ).on( "sortstart", function( event, ui ) {} ); |
stop( event, ui )Type: sortstop
-
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
-
Initialize the sortable with the stop callback specified:
$( ".selector" ).sortable({ stop: function( event, ui ) {}}); |
Bind an event listener to the sortstop event:
$( ".selector" ).on( "sortstop", function( event, ui ) {} ); |
update( event, ui )Type: sortupdate
-
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
-
Initialize the sortable with the update callback specified:
$( ".selector" ).sortable({ update: function( event, ui ) {}}); |
Bind an event listener to the sortupdate event:
$( ".selector" ).on( "sortupdate", function( event, ui ) {} ); |
Overview
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> |