jQuery UI sortable documentation

## 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

Default: `"parent"`
Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).
Multiple types supported:

- 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.

Code examples:

Initialize the sortable with the appendTo option specified:

`$(` `".selector"` `).sortable({ appendTo: document.body });`

Get or set the appendTo option, after initialization:

`// getter` `var` `appendTo = $(` `".selector"` `).sortable(` `"option"``,` `"appendTo"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"appendTo"``, document.body );`

### axisType: String

Default: `false`
If defined, the items can be dragged only horizontally or vertically. Possible values: `"x"`, `"y"`.
Code examples:

Initialize the sortable with the axis option specified:

`$(` `".selector"` `).sortable({ axis:` `"x"` `});`

Get or set the axis option, after initialization:

`// getter` `var` `axis = $(` `".selector"` `).sortable(` `"option"``,` `"axis"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"axis"``,` `"x"` `);`

### cancelType: Selector

Default: `":input,button"`
Prevents sorting if you start on elements matching the selector.
Code examples:

Initialize the sortable with the cancel option specified:

`$(` `".selector"` `).sortable({ cancel:` `"a,button"` `});`

Get or set the cancel option, after initialization:

`// getter` `var` `cancel = $(` `".selector"` `).sortable(` `"option"``,` `"cancel"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"cancel"``,` `"a,button"` `);`

### connectWithType: Selector

Default: `false`
A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the `connectWith` option must be set on both sortable elements.
Code examples:

Initialize the sortable with the connectWith option specified:

`$(` `".selector"` `).sortable({ connectWith:` `"#shopping-cart"` `});`

Get or set the connectWith option, after initialization:

`// getter` `var` `connectWith = $(` `".selector"` `).sortable(` `"option"``,` `"connectWith"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"connectWith"``,` `"#shopping-cart"` `);`

### containmentType: Element or Selector or String

Default: `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.

Multiple types supported:

- 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"`.

Code examples:

Initialize the sortable with the containment option specified:

`$(` `".selector"` `).sortable({ containment:` `"parent"` `});`

Get or set the containment option, after initialization:

`// getter` `var` `containment = $(` `".selector"` `).sortable(` `"option"``,` `"containment"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"containment"``,` `"parent"` `);`

### cursorType: String

Default: `"auto"`
Defines the cursor that is being shown while sorting.
Code examples:

Initialize the sortable with the cursor option specified:

`$(` `".selector"` `).sortable({ cursor:` `"move"` `});`

Get or set the cursor option, after initialization:

`// getter` `var` `cursor = $(` `".selector"` `).sortable(` `"option"``,` `"cursor"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"cursor"``,` `"move"` `);`

### cursorAtType: Object

Default: `false`
Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: `{ top, left, right, bottom }`.
Code examples:

Initialize the sortable with the cursorAt option specified:

`$(` `".selector"` `).sortable({ cursorAt: { left: 5 } });`

Get or set the cursorAt option, after initialization:

`// getter` `var` `cursorAt = $(` `".selector"` `).sortable(` `"option"``,` `"cursorAt"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"cursorAt"``, { left: 5 } );`

### delayType: Integer

Default: `0`
Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.
Code examples:

Initialize the sortable with the delay option specified:

`$(` `".selector"` `).sortable({ delay: 150 });`

Get or set the delay option, after initialization:

`// getter` `var` `delay = $(` `".selector"` `).sortable(` `"option"``,` `"delay"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"delay"``, 150 );`

### disabledType: Boolean

Default: `false`
Disables the sortable if set to `true`.
Code examples:

Initialize the sortable with the disabled option specified:

`$(` `".selector"` `).sortable({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).sortable(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"disabled"``,` `true` `);`

### distanceType: Number

Default: `1`
Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.
Code examples:

Initialize the sortable with the distance option specified:

`$(` `".selector"` `).sortable({ distance: 5 });`

Get or set the distance option, after initialization:

`// getter` `var` `distance = $(` `".selector"` `).sortable(` `"option"``,` `"distance"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"distance"``, 5 );`

### dropOnEmptyType: Boolean

Default: `true`
If `false`, items from this sortable can't be dropped on an empty connect sortable (see the `connectWith` option.
Code examples:

Initialize the sortable with the dropOnEmpty option specified:

`$(` `".selector"` `).sortable({ dropOnEmpty:` `false` `});`

Get or set the dropOnEmpty option, after initialization:

`// getter` `var` `dropOnEmpty = $(` `".selector"` `).sortable(` `"option"``,` `"dropOnEmpty"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"dropOnEmpty"``,` `false` `);`

### forceHelperSizeType: Boolean

Default: `false`
If `true`, forces the helper to have a size.
Code examples:

Initialize the sortable with the forceHelperSize option specified:

`$(` `".selector"` `).sortable({ forceHelperSize:` `true` `});`

Get or set the forceHelperSize option, after initialization:

`// getter` `var` `forceHelperSize = $(` `".selector"` `).sortable(` `"option"``,` `"forceHelperSize"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"forceHelperSize"``,` `true` `);`

### forcePlaceholderSizeType: Boolean

Default: `false`
If true, forces the placeholder to have a size.
Code examples:

Initialize the sortable with the forcePlaceholderSize option specified:

`$(` `".selector"` `).sortable({ forcePlaceholderSize:` `true` `});`

Get or set the forcePlaceholderSize option, after initialization:

`// getter` `var` `forcePlaceholderSize = $(` `".selector"` `).sortable(` `"option"``,` `"forcePlaceholderSize"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"forcePlaceholderSize"``,` `true` `);`

### gridType: Array

Default: `false`
Snaps the sorting element or helper to a grid, every x and y pixels. Array values: `[ x, y ]`.
Code examples:

Initialize the sortable with the grid option specified:

`$(` `".selector"` `).sortable({ grid: [ 20, 10 ] });`

Get or set the grid option, after initialization:

`// getter` `var` `grid = $(` `".selector"` `).sortable(` `"option"``,` `"grid"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"grid"``, [ 20, 10 ] );`

### handleType: Selector or Element

Default: `false`
Restricts sort start click to the specified element.
Code examples:

Initialize the sortable with the handle option specified:

`$(` `".selector"` `).sortable({ handle:` `".handle"` `});`

Get or set the handle option, after initialization:

`// getter` `var` `handle = $(` `".selector"` `).sortable(` `"option"``,` `"handle"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"handle"``,` `".handle"` `);`

### helperType: String or Function()

Default: `"original"`
Allows for a helper element to be used for dragging display.
Multiple types supported:

- 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.

Code examples:

Initialize the sortable with the helper option specified:

`$(` `".selector"` `).sortable({ helper:` `"clone"` `});`

Get or set the helper option, after initialization:

`// getter` `var` `helper = $(` `".selector"` `).sortable(` `"option"``,` `"helper"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"helper"``,` `"clone"` `);`

### itemsType: Selector

Default: `"> *"`
Specifies which items inside the element should be sortable.
Code examples:

Initialize the sortable with the items option specified:

`$(` `".selector"` `).sortable({ items:` `"> li"` `});`

Get or set the items option, after initialization:

`// getter` `var` `items = $(` `".selector"` `).sortable(` `"option"``,` `"items"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"items"``,` `"> li"` `);`

### opacityType: Number

Default: `false`
Defines the opacity of the helper while sorting. From `0.01` to `1`.
Code examples:

Initialize the sortable with the opacity option specified:

`$(` `".selector"` `).sortable({ opacity: 0.5 });`

Get or set the opacity option, after initialization:

`// getter` `var` `opacity = $(` `".selector"` `).sortable(` `"option"``,` `"opacity"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"opacity"``, 0.5 );`

### placeholderType: String

Default: `false`
A class name that gets applied to the otherwise white space.
Code examples:

Initialize the sortable with the placeholder option specified:

`$(` `".selector"` `).sortable({ placeholder:` `"sortable-placeholder"` `});`

Get or set the placeholder option, after initialization:

`// getter` `var` `placeholder = $(` `".selector"` `).sortable(` `"option"``,` `"placeholder"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"placeholder"``,` `"sortable-placeholder"` `);`

### revertType: Boolean or Number

Default: `false`
Whether the sortable items should revert to their new positions using a smooth animation.
Multiple types supported:

- Boolean: When set to `true`, the items will animate with the default duration.
- Number: The duration for the animation, in milliseconds.

Code examples:

Initialize the sortable with the revert option specified:

`$(` `".selector"` `).sortable({ revert:` `true` `});`

Get or set the revert option, after initialization:

`// getter` `var` `revert = $(` `".selector"` `).sortable(` `"option"``,` `"revert"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"revert"``,` `true` `);`

### scrollType: Boolean

Default: `true`
If set to true, the page scrolls when coming to an edge.
Code examples:

Initialize the sortable with the scroll option specified:

`$(` `".selector"` `).sortable({ scroll:` `false` `});`

Get or set the scroll option, after initialization:

`// getter` `var` `scroll = $(` `".selector"` `).sortable(` `"option"``,` `"scroll"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"scroll"``,` `false` `);`

### scrollSensitivityType: Number

Default: `20`
Defines how near the mouse must be to an edge to start scrolling.
Code examples:

Initialize the sortable with the scrollSensitivity option specified:

`$(` `".selector"` `).sortable({ scrollSensitivity: 10 });`

Get or set the scrollSensitivity option, after initialization:

`// getter` `var` `scrollSensitivity = $(` `".selector"` `).sortable(` `"option"``,` `"scrollSensitivity"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"scrollSensitivity"``, 10 );`

### scrollSpeedType: Number

Default: `20`
The speed at which the window should scroll once the mouse pointer gets within the `scrollSensitivity` distance.
Code examples:

Initialize the sortable with the scrollSpeed option specified:

`$(` `".selector"` `).sortable({ scrollSpeed: 40 });`

Get or set the scrollSpeed option, after initialization:

`// getter` `var` `scrollSpeed = $(` `".selector"` `).sortable(` `"option"``,` `"scrollSpeed"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"scrollSpeed"``, 40 );`

### toleranceType: String

Default: `"intersect"`
Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values:

- `"intersect"`: The item overlaps the other item by at least 50%.
- `"pointer"`: The mouse pointer overlaps the other item.

Code examples:

Initialize the sortable with the tolerance option specified:

`$(` `".selector"` `).sortable({ tolerance:` `"pointer"` `});`

Get or set the tolerance option, after initialization:

`// getter` `var` `tolerance = $(` `".selector"` `).sortable(` `"option"``,` `"tolerance"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"tolerance"``,` `"pointer"` `);`

### zIndexType: Integer

Default: `1000`
Z-index for element/helper while being sorted.
Code examples:

Initialize the sortable with the zIndex option specified:

`$(` `".selector"` `).sortable({ zIndex: 9999 });`

Get or set the zIndex option, after initialization:

`// getter` `var` `zIndex = $(` `".selector"` `).sortable(` `"option"``,` `"zIndex"` `);` `// setter` `$(` `".selector"` `).sortable(` `"option"``,` `"zIndex"``, 9999 );`

## Methods

### cancel()

Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started. Useful in the stop and receive callback functions.

- This method does not accept any arguments.

Code examples:

Invoke the cancel method:

`$(` `".selector"` `).sortable(` `"cancel"` `);`

### destroy()

Removes the sortable functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

Code examples:

Invoke the destroy method:

`$(` `".selector"` `).sortable(` `"destroy"` `);`

### disable()

Disables the sortable.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

`$(` `".selector"` `).sortable(` `"disable"` `);`

### enable()

Enables the sortable.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

`$(` `".selector"` `).sortable(` `"enable"` `);`

### option( optionName ) Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

Code examples:

Invoke the method:

`var` `isDisabled = $(` `".selector"` `).sortable(` `"option"``,` `"disabled"` `);`

### option() Returns: PlainObject

Gets an object containing key/value pairs representing the current sortable options hash.

- This method does not accept any arguments.

Code examples:

Invoke the method:

`var` `options = $(` `".selector"` `).sortable(` `"option"` `);`

### option( optionName, value )

Sets the value of the sortable option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

Code examples:

Invoke the method:

`$(` `".selector"` `).sortable(` `"option"``,` `"disabled"``,` `true` `);`

### option( options )

Sets one or more options for the sortable.

- options
  Type: Object
  A map of option-value pairs to set.

Code examples:

Invoke the method:

`$(` `".selector"` `).sortable(` `"option"``, { disabled:` `true` `} );`

### refresh()

Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.

- This method does not accept any arguments.

Code examples:

Invoke the refresh method:

`$(` `".selector"` `).sortable(` `"refresh"` `);`

### refreshPositions()

Refresh the cached positions of the sortable items. Calling this method refreshes the cached item positions of all sortables.

- This method does not accept any arguments.

Code examples:

Invoke the refreshPositions method:

`$(` `".selector"` `).sortable(` `"refreshPositions"` `);`

### serialize( options ) Returns: String

Serializes the sortable's item `id`s 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"`.

- options
  Type: Object
  Options to customize the serialization.
  - key (default: `the part of the attribute in front of the separator`)
    Type: String
    Replaces `part1[]` with the specified value.
  - attribute (default: `"id"`)
    Type: String
    The name of the attribute to use for the values.
  - expression (default: `/(.+)[-=_](.+)/`)
    Type: RegExp
    A regular expression used to split the attribute value into key and value parts.

Code examples:

Invoke the serialize method:

`var` `sorted = $(` `".selector"` `).sortable(` `"serialize"``, { key:` `"sort"` `} );`

### toArray() Returns: Array

Serializes the sortable's item id's into an array of string.

- This method does not accept any arguments.

Code examples:

Invoke the toArray method:

`var` `sortedIDs = $(` `".selector"` `).sortable(` `"toArray"` `);`

### widget() Returns: jQuery

Returns a `jQuery` object containing the sortable element.

- This method does not accept any arguments.

Code examples:

Invoke the widget method:

`var` `widget = $(` `".selector"` `).sortable(` `"widget"` `);`

## Events

### activate( event, ui )Type: `sortactivate`

This event is triggered when using connected lists, every connected list on drag start receives it.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when sorting stops, but when the placeholder/helper is still available.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered during sorting, but only when the DOM position has changed.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

Triggered when the sortable is created.

- event
  Type: Event
- ui
  Type: Object

Code examples:

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`

This event is triggered when sorting was stopped, is propagated to all possible connected lists.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when a sortable item is moved away from a connected list.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when a sortable item is moved into a connected list.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when a connected sortable list has received an item from another list.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when a sortable item has been dragged out from the list and into another.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered during sorting.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when sorting starts.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when sorting has stopped.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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`

This event is triggered when the user stopped sorting and the DOM position has changed.

- event
  Type: Event
- ui
  Type: Object
  - helper
    Type: jQuery
    The jQuery object representing the helper being sorted
  - item
    Type: jQuery
    The jQuery object representing the current dragged element
  - offset
    Type: Object
    The current absolute position of the helper represented as `{ top, left }`
  - position
    Type: Object
    The current position of the helper represented as `{ top, left }`
  - originalPosition
    Type: Object
    The original position of the element represented as `{ top, left }`
  - sender
    Type: jQuery
    The sortable that the item comes from if moving from one sortable to another

Code examples:

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``>` `` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"``>` `` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>` `` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/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``>`

#### Demo: