jQuery UI API - Sortable Widget

Usage

Description: Use the mouse to reorder elements in a list or grid.

Version Added: 1.0

Dependencies:

Note: The jQuery UI Sortable plugin makes the selected elements sortable by dragging with the mouse.

Note: For sorting table rows, the tbody must be sortable, not the table.

Quick Navigation

Options	Methods	Events
appendTo axis cancel connectWith containment cursor cursorAt delay disabled distance dropOnEmpty forceHelperSize forcePlaceholderSize grid handle helper items opacity placeholder revert scroll scrollSensitivity scrollSpeed tolerance zIndex	cancel destroy disable enable option refresh refreshPositions serialize toArray widget	activate beforeStop change create deactivate out over receive remove sort start stop update

Option	Type	Description	Default Value
appendTo	jQuery or Element or Selector or String	Where the helper that moves with the mouse is appended during the drag (e.g., to resolve overlap/zIndex issues). <br> Supports multiple types: jQuery: A jQuery object containing the element to append the helper to. <br> Element: The element to append the helper to. <br> Selector: A selector specifying which element to append the helper to. <br> String: The string "parent" will cause the helper to become a sibling of the sortable item. <br> Code example: Initialize a sortable with the specified appendTo option: $( ".selector" ).sortable({ appendTo: document.body }); <br> After initialization, get or set the appendTo option: // getter <br> var appendTo = $( ".selector" ).sortable( "option", "appendTo" ); <br> // setter <br> $( ".selector" ).sortable( "option", "appendTo", document.body );	"parent"
axis	String	If defined, the items can be dragged only horizontally or vertically. Possible values: "x", "y". <br> Code example: Initialize a sortable with the specified axis option: $( ".selector" ).sortable({ axis: "x" }); <br> After initialization, get or set the axis option: // getter <br> var axis = $( ".selector" ).sortable( "option", "axis" ); <br> // setter <br> $( ".selector" ).sortable( "option", "axis", "x" );	false
cancel	Selector	Prevents sorting from starting on matched elements. <br> Code example: Initialize sortable with the specified cancel option: $( ".selector" ).sortable({ cancel: "a,button" }); After initialization, get or set the cancel option: // getter<br>var cancel = $( ".selector" ).sortable( "option", "cancel" );<br> <br>// setter<br>$( ".selector" ).sortable( "option", "cancel", "a,button" );	"input, textarea, button, select, option"
connectWith	Selector	The selector for the sortable elements that items in the list should be connected to. This is a one-way relationship; if you want items to be connected in both directions, you must set the connectWith option on both sortable elements. <br> Code example: Initialize sortable with the specified connectWith option: $( ".selector" ).sortable({ connectWith: "#shopping-cart" }); After initialization, get or set the connectWith option: // getter<br>var connectWith = $( ".selector" ).sortable( "option", "connectWith" );<br> <br>// setter<br>$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );	false
containment	Element or Selector or String	Defines the boundary constraining the sortable item during drag. <br> Note: The element specified for containment must have a computed width and height (though it does not need to be explicit). For example, if you have float: left sortable children and specify containment: "parent", ensure that the sortable/parent container has float: left as well, otherwise it will have height: 0, leading to undefined behavior. Supported types: Element: An element to use as the container. <br> Selector: A selector specifying an element to use as the container. <br> String: A string identifying an element to use as the container. Possible values: "parent", "document", "window". <br> Code example: Initialize sortable with the specified containment option: $( ".selector" ).sortable({ containment: "parent" }); After initialization, get or set the containment option: // getter<br>var containment = $( ".selector" ).sortable( "option", "containment" );<br> <br>// setter<br>$( ".selector" ).sortable( "option", "containment", "parent" );	false
cursor	String	Defines the cursor displayed when sorting. <br> Code example: Initialize sortable with the specified cursor option: $( ".selector" ).sortable({ cursor: "move" }); After initialization, get or set the cursor option: // getter<br>var cursor = $( ".selector" ).sortable( "option", "cursor" );<br> <br>// setter<br>$( ".selector" ).sortable( "option", "cursor", "move" );	"auto"
cursorAt	Object	Move the sortable element or helper so that the cursor always appears to drag from the same position. Coordinates can be given as a combination of one or two keys in a hash: { top, left, right, bottom }.

Code example: Initialize sortable with the specified cursorAt option: $( ".selector" ).sortable({ cursorAt: { left: 5 } }); After initialization, get or set the cursorAt option: // getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); | false | | delay | Integer | The time in milliseconds to wait before starting to sort after the mouse button is pressed. This option can prevent unwanted sorting when clicking on an element.
Code example: Initialize sortable with the specified delay option: $( ".selector" ).sortable({ delay: 150 }); After initialization, get or set the delay option: // getter
var delay = $( ".selector" ).sortable( "option", "delay" );
// setter
$( ".selector" ).sortable( "option", "delay", 150 ); | 0 | | disabled | Boolean | If set to true, disables the sortable.
Code example: Initialize sortable with the specified disabled option: $( ".selector" ).sortable({ disabled: true }); After initialization, get or set the disabled option: // getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
// setter
$( ".selector" ).sortable( "option", "disabled", true ); | false | | distance | Number | The distance in pixels that the mouse must be moved before sorting starts. If specified, sorting will only start after dragging beyond the specified distance. This option can be used to allow clicking on an element within a handle.
Code example: Initialize sortable with the specified distance option: $( ".selector" ).sortable({ distance: 5 }); After initialization, get or set the distance option: // getter
var distance = $( ".selector" ).sortable( "option", "distance" );
// setter
$( ".selector" ).sortable( "option", "distance", 5 ); | 1 | | dropOnEmpty | Boolean | If false, items from this sortable cannot be dropped on an empty connected sortable (see the connectWith option).
Code example: Initialize sortable with the specified dropOnEmpty option: $( ".selector" ).sortable({ dropOnEmpty: false }); After initialization, get or set the dropOnEmpty option: // getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false ); | true | | forceHelperSize | Boolean | If true, forces the helper to have a size. Code example: Initialize sortable with the specified forceHelperSize option: $( ".selector" ).sortable({ forceHelperSize: true }); After initialization, get or set the forceHelperSize option: // getter var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" ); // setter $( ".selector" ).sortable( "option", "forceHelperSize", true ); | false | | forcePlaceholderSize | Boolean | If true, forces the placeholder to have a size. Code example: Initialize sortable with the specified forcePlaceholderSize option: $( ".selector" ).sortable({ forcePlaceholderSize: true }); After initialization, get or set the forcePlaceholderSize option: // getter var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" ); // setter $( ".selector" ).sortable( "option", "forcePlaceholderSize", true ); | false | | grid | Array | Aligns the sortable elements or helper to a grid, on every x and y pixel. The array must be of the form [ x, y ]. Code example: Initialize sortable with the specified grid option: $( ".selector" ).sortable({ grid: [ 20, 10 ] }); After initialization, get or set the grid option: // getter var grid = $( ".selector" ).sortable( "option", "grid" ); // setter $( ".selector" ).sortable( "option", "grid", [ 20, 10 ] ); | false | | handle | Selector or Element | If specified, restricts sorting initiation to the specified element. Code example: Initialize sortable with the specified handle option: $( ".selector" ).sortable({ handle: ".handle" }); After initialization, get or set the handle option: // getter var handle = $( ".selector" ).sortable( "option", "handle" ); // setter $( ".selector" ).sortable( "option", "handle", ".handle" ); | false | | helper | String or Function() | Allows for a helper element to be used for dragging display. Supports multiple types: String: If set to "clone", the element will be cloned and the clone will be dragged. Function: A function that will return a DOMElement to use for dragging. The function receives the event and the element being sorted. Code example: Initialize sortable with the specified helper option: $( ".selector" ).sortable({ helper: "clone" }); After initialization, get or set the helper option: // getter var helper = $( ".selector" ).sortable( "option", "helper" ); // setter $( ".selector" ).sortable( "option", "helper", "clone" ); | "original" | | items | Selector | Specifies which item inside the element should be sortable. Code example: Initialize sortable with specified items option: $( ".selector" ).sortable({ items: "> li" }); After initialization, get or set the items option: // getter var items = $( ".selector" ).sortable( "option", "items" ); // setter $( ".selector" ).sortable( "option", "items", "> li" ); | "> *" | | opacity | Number | Opacity of the helper during sorting. From 0.01 to 1. Code example: Initialize sortable with specified opacity option: $( ".selector" ).sortable({ opacity: 0.5 }); After initialization, get or set the opacity option: // getter var opacity = $( ".selector" ).sortable( "option", "opacity" ); // setter $( ".selector" ).sortable( "option", "opacity", 0.5 ); | false | | placeholder | String | The class name to apply, otherwise it's a white blank. Code example: Initialize sortable with specified placeholder option: $( ".selector" ).sortable({ placeholder: "sortable-placeholder" }); After initialization, get or set the placeholder option: // getter var placeholder = $( ".selector" ).sortable( "option", "placeholder" ); // setter $( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" ); | false | | revert | Boolean or Number | Whether the sortable item should animate smoothly to its new position. Supports multiple types: Boolean: When set to true, the item will animate with the default duration. Number: The duration of the animation in milliseconds. Code example: Initialize sortable with specified revert option: $( ".selector" ).sortable({ revert: true }); After initialization, get or set the revert option: // getter var revert = $( ".selector" ).sortable( "option", "revert" ); // setter $( ".selector" ).sortable( "option", "revert", true ); | false | | scroll | Boolean | If set to true, the page will scroll when reaching the edge. Code example: Initialize sortable with specified scroll option: $( ".selector" ).sortable({ scroll: false }); After initialization, get or set the scroll option: // getter var scroll = $( ".selector" ).sortable( "option", "scroll" ); // setter $( ".selector" ).sortable( "option", "scroll", false ); | true | | scrollSensitivity | Number | Defines the distance from the edge at which scrolling starts. Code example: Initialize sortable with specified scrollSensitivity option: $( ".selector" ).sortable({ scrollSensitivity: 10 }); After initialization, get or set the scrollSensitivity option: // getter var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" ); // setter $( ".selector" ).sortable( "option", "scrollSensitivity", 10 ); | 20 | | scrollSpeed | Number | The speed at which the window scrolls when the mouse pointer is within the scrollSensitivity distance. Ignored if the scroll option is false. Code example: Initialize sortable with specified scrollSpeed option: $( ".selector" ).sortable({ scrollSpeed: 40 }); After initialization, get or set the scrollSpeed option: // getter var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" ); // setter $( ".selector" ).sortable( "option", "scrollSpeed", 40 ); | 20 | | tolerance | String | Specifies the mode used to test whether the item being moved is over another item. Possible values: "intersect": The item overlaps another item by at least 50%. "pointer": The mouse pointer overlaps another item. Code example: Initialize sortable with specified tolerance option: $( ".selector" ).sortable({ tolerance: "pointer" }); After initialization, get or set the tolerance option: // getter var tolerance = $( ".selector" ).sortable( "option", "tolerance" ); // setter $( ".selector" ).sortable( "option", "tolerance", "pointer" ); | "intersect" | | zIndex | Integer | The Z-index of the element/helper when being sorted. Code example: Initialize sortable with specified zIndex option: $( ".selector" ).sortable({ zIndex: 9999 }); After initialization, get or set the zIndex option: // getter var zIndex = $( ".selector" ).sortable( "option", "zIndex" ); // setter $( ".selector" ).sortable( "option", "zIndex", 9999 ); | 1000 |

Method	Returns	Description
cancel()	jQuery (plugin only)	Cancels a change in the current sortable and reverts to the previous state when sorting starts. Useful within stop and receive callback functions. <br> This method does not accept any parameters. Code example: Call the cancel method: $( ".selector" ).sortable( "cancel" );
destroy()	jQuery (plugin only)	Completely removes the sortable functionality. This will return the element to its pre-initialization state. <br> This method does not accept any parameters. Code example: Call the destroy method: $( ".selector" ).sortable( "destroy" );
disable()	jQuery (plugin only)	Disables the sortable. <br> This method does not accept any parameters. Code example: Call the disable method: $( ".selector" ).sortable( "disable" );
enable()	jQuery (plugin only)	Enables sortable. <br> This method does not accept any parameters. Code example: Call the enable method: $( ".selector" ).sortable( "enable" );
option( optionName )	Object	Gets the value currently associated with the specified optionName. <br> optionName<br> Type: String<br> Description: The name of the option to get. Code example: Call the method: var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
option()	PlainObject	Gets an object containing key/value pairs representing the current sortable options hash. <br> This method does not accept any parameters. Code example: Call the method: var options = $( ".selector" ).sortable( "option" );
option( optionName, value )	jQuery (plugin only)	Sets the value of the sortable option associated with the specified optionName. <br> optionName<br> Type: String<br> Description: The name of the option to set.<br> value<br> Type: Object<br> Description: The value to set for the option. Code example: Call the method: $( ".selector" ).sortable( "option", "disabled", true );
option( options )	jQuery (plugin only)	Sets one or more options for the sortable. <br> options<br> Type: Object<br> Description: A map of option-value pairs to set. Code example: Call the method: $( ".selector" ).sortable( "option", { disabled: true } );
refresh()	jQuery (plugin only)	Refreshes the sortable items. Triggers all sortable items to reload, causing new items to be recognized. <br> This method does not accept any parameters. Code example: Call the refresh method: $( ".selector" ).sortable( "refresh" );
refreshPositions()	jQuery (plugin only)	Refreshes the cached positions of the sortable items. Call this method to refresh the cached positions of all sortable items. <br> This method does not accept any parameters. Code example: Call the refreshPositions method: $( ".selector" ).sortable( "refreshPositions" );
serialize( options )	String	Serializes the item IDs of a sortable into a form/ajax-submitable string. Calling this method generates a hash that can be appended to any URL to easily submit a new item order back to the server. <br> By default, it works by taking the ID of each item, which is in the format "setname_number", and produces a hash like "setname[]=number&setname[]=number". Note: If the serialization returns an empty string, ensure that the id attribute contains an underscore (_). The format must be "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 (_), equals (=), or hyphen (-) to separate the set and number. For example, "foo=1", "foo-1", "foo_1" all serialize to "foo[]=1". options<br> Type: Object<br> Options to customize the serialization.<br> <br> key (default: part before the separator in the attribute)<br> Type: String<br> Description: Replaces part1[] with the specified value.<br> <br> attribute (default: "id")<br> Type: String<br> Description: The attribute name to use for the values.<br> <br> expression (default: /(.+)-=_/)<br> Type: RegExp<br> Description: The regular expression used to separate the attribute value into key and value parts. Code example: Calling the serialize method: var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
toArray( options )	Array	Serializes the item IDs of a sortable into an array of strings. <br> options<br> Type: Object<br> Options to customize the serialization.<br> <br> attribute (default: "id")<br> Type: String<br> Description: The attribute name to use for the values. Code example: Calling the toArray method: var sortedIDs = $( ".selector" ).sortable( "toArray" );
widget()	jQuery	Returns a jQuery object containing the sortable element. <br> This method does not accept any parameters. Code example: Calling the widget method: var widget = $( ".selector" ).sortable( "widget" );

Event	Type	Description
activate( event, ui )	sortactivate	Triggered when using connected lists, each connected list receives it at the start of the drag. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the sortable helper. <br> <br> item<br> Type: jQuery<br> Description: jQuery object representing the currently dragged element. <br> <br> offset<br> Type: Object<br> Description: Current absolute position of the helper, represented as { top, left }. <br> <br> position<br> Type: Object<br> Description: Current position of the helper, represented as { top, left }. <br> <br> originalPosition<br> Type: Object<br> Description: Original position of the element, represented as { top, left }. <br> <br> sender<br> Type: jQuery<br> Description: The sortable the item comes from if moved from one sortable to another. <br> <br> placeholder<br> Type: jQuery<br> Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified activate callback: $( ".selector" ).sortable({<br>activate: function( event, ui ) {}<br>}); Bind an event listener to the sortactivate event: $( ".selector" ).on( "sortactivate", function( event, ui ) {} );
beforeStop( event, ui )	sortbeforestop	Triggered when sorting stops, except when the placeholder/helper is still available. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the sortable helper. <br> <br> item<br> Type: jQuery<br> Description: jQuery object representing the currently dragged element. <br> <br> offset<br> Type: Object<br> Description: Current absolute position of the helper, represented as { top, left }. <br> <br> position<br> Type: Object<br> Description: Current position of the helper, represented as { top, left }. <br> <br> originalPosition<br> Type: Object<br> Description: Original position of the element, represented as { top, left }. <br> <br> sender<br> Type: jQuery<br> Description: The sortable the item comes from if moved from one sortable to another. <br> <br> placeholder<br> Type: jQuery<br> Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified beforeStop callback: $( ".selector" ).sortable({<br>beforeStop: function( event, ui ) {}<br>}); Bind an event listener to the sortbeforestop event: $( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
change( event, ui )	sortchange	Triggered during sorting, except when the DOM position changes. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the helper being sorted. <br> <br> item<br> Type: jQuery<br> Description: jQuery object representing the current dragged element. <br> <br> offset<br> Type: Object<br> Description: Current absolute position of the helper, represented as { top, left }. <br> <br> position<br> Type: Object<br> Description: Current position of the helper, represented as { top, left }. <br> <br> originalPosition<br> Type: Object<br> Description: Original position of the element, represented as { top, left }. <br> <br> sender<br> Type: jQuery<br> Description: The sortable from which the item is moved if moving from one sortable to another. <br> <br> placeholder<br> Type: jQuery<br> Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified change callback: $( ".selector" ).sortable({<br>change: function( event, ui ) {}<br>}); Bind an event listener to the sortchange event: $( ".selector" ).on( "sortchange", function( event, ui ) {} );
create( event, ui )	sortcreate	Triggered when the sortable is created. <br> event<br> Type: Event<br> <br> ui<br> Type: Object Note: The ui object is empty, included here for consistency with other events. Code example: Initialize sortable with specified create callback: $( ".selector" ).sortable({<br>create: function( event, ui ) {}<br>}); Bind an event listener to the sortcreate event: $( ".selector" ).on( "sortcreate", function( event, ui ) {} );
deactivate( event, ui )	sortdeactivate	Triggered when sorting stops, this event propagates to all connected lists. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the helper being sorted. <br> <br> item<br> Type: jQuery<br> Description: jQuery object representing the current dragged element. <br> <br> offset<br> Type: Object<br> Description: Current absolute position of the helper, represented as { top, left }. <br> <br> position<br> Type: Object<br> Description: Current position of the helper, represented as { top, left }. <br> <br> originalPosition<br> Type: Object<br> Description: Original position of the element, represented as { top, left }. <br> <br> sender<br> Type: jQuery<br> Description: The sortable from which the item comes if moved from one sortable to another. <br> <br> placeholder<br> Type: jQuery<br> Description: jQuery object representing the element used as a placeholder. Code example: Initialize a sortable with a specified deactivate callback: $( ".selector" ).sortable({<br>deactivate: function( event, ui ) {}<br>}); Bind an event listener to the sortdeactivate event: $( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
out( event, ui )	sortout	Triggered when a sortable item is removed from a sortable list. <br> Note: This event is also triggered when a sortable item is reverted. event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: jQuery object representing the helper being sorted. <br> <br> item<br> Type: jQuery<br> Description: jQuery object representing the current dragged element. <br> <br> offset<br> Type: Object<br> Description: Current absolute position of the helper, represented as { top, left }. <br> <br> position<br> Type: Object<br> Description: Current position of the helper, represented as { top, left }. <br> <br> originalPosition<br> Type: Object<br> Description: Original position of the element, represented as { top, left }. <br> <br> sender<br> Type: jQuery<br> Description: The sortable from which the item comes if moved from one sortable to another. <br> <br> placeholder<br> Type: jQuery<br> Description: jQuery object representing the element used as a placeholder. Code example: Initialize a sortable with a specified out callback: $( ".selector" ).sortable({<br>out: function( event, ui ) {}<br>}); Bind an event listener to the sortout event: $( ".selector" ).on( "sortout", function( event, ui ) {} );
over( event, ui )	sortover	Triggered when a sortable item is moved into a sortable list.

event
Type: Event

ui
Type: Object

helper
Type: jQuery
Description: jQuery object representing the helper being sorted.

item
Type: jQuery
Description: jQuery object representing the current dragged element.

offset
Type: Object
Description: The current absolute position of the helper, represented as { top, left }.

position
Type: Object
Description: The current position of the helper, represented as { top, left }.

originalPosition
Type: Object
Description: The original position of the element, represented as { top, left }.

sender
Type: jQuery
Description: The sortable from which the item comes if moved from one sortable to another.

placeholder
Type: jQuery
Description: jQuery object representing the element used as a placeholder.
Code example: Initialize sortable with specified over callback:
$( ".selector" ).sortable({
over: function( event, ui ) {}
});
Bind an event listener to the sortover event:
$( ".selector" ).on( "sortover", function( event, ui ) {} );

| receive( event, ui ) | sortreceive | Triggered when an item from a connected sortable list is dropped into another list. The latter is the event target.
event
Type: Event

ui
Type: Object

helper
Type: jQuery
Description: jQuery object representing the helper being sorted.

item
Type: jQuery
Description: jQuery object representing the current dragged element.

offset
Type: Object
Description: The current absolute position of the helper, represented as { top, left }.

position
Type: Object
Description: The current position of the helper, represented as { top, left }.

originalPosition
Type: Object
Description: The original position of the element, represented as { top, left }.

sender
Type: jQuery
Description: The sortable from which the item comes if moved from one sortable to another.

placeholder
Type: jQuery
Description: jQuery object representing the element used as a placeholder.
Code example: Initialize sortable with specified receive callback:
$( ".selector" ).sortable({
receive: function( event, ui ) {}
});
Bind an event listener to the sortreceive event:
$( ".selector" ).on( "sortreceive", function( event, ui ) {} ); | remove( event, ui ) | sortremove | Triggered when an item from a connected sortable list is dropped into another list. The former is the event target. event Type: Event ui Type: Object helper Type: jQuery Description: jQuery object representing the helper being sorted. item Type: jQuery Description: jQuery object representing the currently dragged element. offset Type: Object Description: Current absolute position of the helper, represented as { top, left }. position Type: Object Description: Current position of the helper, represented as { top, left }. originalPosition Type: Object Description: Original position of the element, represented as { top, left }. placeholder Type: jQuery Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified remove callback: $( ".selector" ).sortable({ remove: function( event, ui ) {} }); Bind an event listener to the sortremove event: $( ".selector" ).on( "sortremove", function( event, ui ) {} ); | | sort( event, ui ) | sort | Triggered during sorting. event Type: Event ui Type: Object helper Type: jQuery Description: jQuery object representing the helper being sorted. item Type: jQuery Description: jQuery object representing the currently dragged element. offset Type: Object Description: Current absolute position of the helper, represented as { top, left }. position Type: Object Description: Current position of the helper, represented as { top, left }. originalPosition Type: Object Description: Original position of the element, represented as { top, left }. sender Type: jQuery Description: If moved from one sortable to another, the sortable the item came from. placeholder Type: jQuery Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified sort callback: $( ".selector" ).sortable({ sort: function( event, ui ) {} }); Bind an event listener to the sort event: $( ".selector" ).on( "sort", function( event, ui ) {} ); | | start( event, ui ) | sortstart | Triggered when sorting starts. event Type: Event ui Type: Object helper Type: jQuery Description: jQuery object representing the helper being sorted. item Type: jQuery Description: jQuery object representing the current dragged element. offset Type: Object Description: Current absolute position of the helper, represented as { top, left }. position Type: Object Description: Current position of the helper, represented as { top, left }. originalPosition Type: Object Description: Original position of the element, represented as { top, left }. sender Type: jQuery Description: The sortable from which the item is moved if moved from one sortable to another. placeholder Type: jQuery Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified start callback: $( ".selector" ).sortable({ start: function( event, ui ) {} }); Bind an event listener to the sortstart event: $( ".selector" ).on( "sortstart", function( event, ui ) {} ); | | stop( event, ui ) | sortstop | Triggered when sorting stops. event Type: Event ui Type: Object helper Type: jQuery Description: jQuery object representing the helper being sorted. item Type: jQuery Description: jQuery object representing the current dragged element. offset Type: Object Description: Current absolute position of the helper, represented as { top, left }. position Type: Object Description: Current position of the helper, represented as { top, left }. originalPosition Type: Object Description: Original position of the element, represented as { top, left }. sender Type: jQuery Description: The sortable from which the item is moved if moved from one sortable to another. placeholder Type: jQuery Description: jQuery object representing the element used as a placeholder. Code example: Initialize sortable with specified stop callback: $( ".selector" ).sortable({ stop: function( event, ui ) {} }); Bind an event listener to the sortstop event: $( ".selector" ).on( "sortstop", function( event, ui ) {} ); | | update(event, ui) | sortupdate | Triggered when the user stops sorting and the DOM position has changed. event Type: Event ui Type: Object helper Type: jQuery Description: The jQuery object representing the helper that was sorted. item Type: jQuery Description: The jQuery object representing the current dragged element. offset Type: Object Description: The current absolute position of the helper, represented as { top, left }. position Type: Object Description: The current position of the helper, represented as { top, left }. originalPosition Type: Object Description: The original position of the element, represented as { top, left }. sender Type: jQuery Description: If moved from one sortable to another, the sortable the item came from. placeholder Type: jQuery Description: The jQuery object representing the element used as a placeholder. Code example: Initialize sortable with the specified update callback: $( ".selector" ).sortable({ update: function( event, ui ) {} }); Bind an event listener to the sortupdate event: $( ".selector" ).on( "sortupdate", function( event, ui ) {} ); |

Example

A simple jQuery UI Sortable Widget.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sortable Widget Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</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>

View Demo

❮ Api Uniqueid Api Datepicker ❯

jQuery UI API - Sortable Widget

Category

Usage

Quick Navigation

Example