Sortable Widget

Categories: Interactions

Sortable Widgetversion added: 1.0

Description: Reorder elements in a list or grid using the mouse.

QuickNavExamples

Options

Methods

Events

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.

Dependencies

Options

appendTo 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  appendTo: document.body
});

Get or set the appendTo option, after initialization:

1
2
3
4
5
 
// Getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// Setter
$( ".selector" ).sortable( "option", "appendTo", document.body );

axis 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  axis: "x"
});

Get or set the axis option, after initialization:

1
2
3
4
5
 
// Getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// Setter
$( ".selector" ).sortable( "option", "axis", "x" );

cancel 

Type: Selector
Default: "input,textarea,button,select,option"
Prevents sorting if you start on elements matching the selector.
Code examples:

Initialize the sortable with the cancel option specified:

1
2
3
 
$( ".selector" ).sortable({
  cancel: "a,button"
});

Get or set the cancel option, after initialization:

1
2
3
4
5
 
// Getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// Setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );

connectWith 

Type: 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:

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

Get or set the connectWith option, after initialization:

1
2
3
4
5
 
// Getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// Setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );

containment 

Type: Element or Selector or String
Default: false

Defines a bounding box that the sortable items are constrained 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:

1
2
3
 
$( ".selector" ).sortable({
  containment: "parent"
});

Get or set the containment option, after initialization:

1
2
3
4
5
 
// Getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// Setter
$( ".selector" ).sortable( "option", "containment", "parent" );

cursor 

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

Initialize the sortable with the cursor option specified:

1
2
3
 
$( ".selector" ).sortable({
  cursor: "move"
});

Get or set the cursor option, after initialization:

1
2
3
4
5
 
// Getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// Setter
$( ".selector" ).sortable( "option", "cursor", "move" );

cursorAt 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  cursorAt: { left: 5 }
});

Get or set the cursorAt option, after initialization:

1
2
3
4
5
 
// Getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// Setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );

delay 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  delay: 150
});

Get or set the delay option, after initialization:

1
2
3
4
5
 
// Getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// Setter
$( ".selector" ).sortable( "option", "delay", 150 );

disabled 

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

Initialize the sortable with the disabled option specified:

1
2
3
 
$( ".selector" ).sortable({
  disabled: true
});

Get or set the disabled option, after initialization:

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// Setter
$( ".selector" ).sortable( "option", "disabled", true );

distance 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  distance: 5
});

Get or set the distance option, after initialization:

1
2
3
4
5
 
// Getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// Setter
$( ".selector" ).sortable( "option", "distance", 5 );

dropOnEmpty 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  dropOnEmpty: false
});

Get or set the dropOnEmpty option, after initialization:

1
2
3
4
5
 
// Getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// Setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );

forceHelperSize 

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

Initialize the sortable with the forceHelperSize option specified:

1
2
3
 
$( ".selector" ).sortable({
  forceHelperSize: true
});

Get or set the forceHelperSize option, after initialization:

1
2
3
4
5
 
// Getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// Setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );

forcePlaceholderSize 

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

Initialize the sortable with the forcePlaceholderSize option specified:

1
2
3
 
$( ".selector" ).sortable({
  forcePlaceholderSize: true
});

Get or set the forcePlaceholderSize option, after initialization:

1
2
3
4
5
 
// Getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// Setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );

grid 

Type: 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:

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

Get or set the grid option, after initialization:

1
2
3
4
5
 
// Getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// Setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );

handle 

Type: Selector or Element
Default: false
Restricts sort start click to the specified element.
Code examples:

Initialize the sortable with the handle option specified:

1
2
3
 
$( ".selector" ).sortable({
  handle: ".handle"
});

Get or set the handle option, after initialization:

1
2
3
4
5
 
// Getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// Setter
$( ".selector" ).sortable( "option", "handle", ".handle" );

helper 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  helper: "clone"
});

Get or set the helper option, after initialization:

1
2
3
4
5
 
// Getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// Setter
$( ".selector" ).sortable( "option", "helper", "clone" );

items 

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

Initialize the sortable with the items option specified:

1
2
3
 
$( ".selector" ).sortable({
  items: "> li"
});

Get or set the items option, after initialization:

1
2
3
4
5
 
// Getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// Setter
$( ".selector" ).sortable( "option", "items", "> li" );

opacity 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  opacity: 0.5
});

Get or set the opacity option, after initialization:

1
2
3
4
5
 
// Getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// Setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );

placeholder 

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

Initialize the sortable with the placeholder option specified:

1
2
3
 
$( ".selector" ).sortable({
  placeholder: "sortable-placeholder"
});

Get or set the placeholder option, after initialization:

1
2
3
4
5
 
// Getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// Setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );

revert 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  revert: true
});

Get or set the revert option, after initialization:

1
2
3
4
5
 
// Getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// Setter
$( ".selector" ).sortable( "option", "revert", true );

scroll 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  scroll: false
});

Get or set the scroll option, after initialization:

1
2
3
4
5
 
// Getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// Setter
$( ".selector" ).sortable( "option", "scroll", false );

scrollSensitivity 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  scrollSensitivity: 10
});

Get or set the scrollSensitivity option, after initialization:

1
2
3
4
5
 
// Getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// Setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );

scrollSpeed 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  scrollSpeed: 40
});

Get or set the scrollSpeed option, after initialization:

1
2
3
4
5
 
// Getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// Setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );

tolerance 

Type: 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:

1
2
3
 
$( ".selector" ).sortable({
  tolerance: "pointer"
});

Get or set the tolerance option, after initialization:

1
2
3
4
5
 
// Getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// Setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );

zIndex 

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

Initialize the sortable with the zIndex option specified:

1
2
3
 
$( ".selector" ).sortable({
  zIndex: 9999
});

Get or set the zIndex option, after initialization:

1
2
3
4
5
 
// Getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
 
// Setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );

Methods

cancel()Returns: jQuery (plugin only)

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:

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

destroy()Returns: jQuery (plugin only)

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:

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

disable()Returns: jQuery (plugin only)

Disables the sortable.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

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

enable()Returns: jQuery (plugin only)

Enables the sortable.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".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:

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

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current sortable options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

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

option( optionName, value )Returns: jQuery (plugin only)

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:

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

option( options )Returns: jQuery (plugin only)

Sets one or more options for the sortable.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

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

refresh()Returns: jQuery (plugin only)

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:

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

refreshPositions()Returns: jQuery (plugin only)

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:

1
 
$( ".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".

  • 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:

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

toArray( options )Returns: Array

Serializes the sortable's item id's into an array of string.
  • options
    Type: Object
    Options to customize the serialization.
    • attribute (default: "id")
      Type: String
      The name of the attribute to use for the values.
Code examples:

Invoke the toArray method:

1
 
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:

1
 
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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the activate callback specified:

1
2
3
 
$( ".selector" ).sortable({
  activate: function( event, ui ) {}
});

Bind an event listener to the sortactivate event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the beforeStop callback specified:

1
2
3
 
$( ".selector" ).sortable({
  beforeStop: function( event, ui ) {}
});

Bind an event listener to the sortbeforestop event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the change callback specified:

1
2
3
 
$( ".selector" ).sortable({
  change: function( event, ui ) {}
});

Bind an event listener to the sortchange event:

1
 
$( ".selector" ).on( "sortchange", function( event, ui ) {} );

create( event, ui )Type: sortcreate

Triggered when the sortable is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the sortable with the create callback specified:

1
2
3
 
$( ".selector" ).sortable({
  create: function( event, ui ) {}
});

Bind an event listener to the sortcreate event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the deactivate callback specified:

1
2
3
 
$( ".selector" ).sortable({
  deactivate: function( event, ui ) {}
});

Bind an event listener to the sortdeactivate event:

1
 
$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );

out( event, ui )Type: sortout

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

Note: This event is also triggered when a sortable item is dropped.

  • 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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the out callback specified:

1
2
3
 
$( ".selector" ).sortable({
  out: function( event, ui ) {}
});

Bind an event listener to the sortout event:

1
 
$( ".selector" ).on( "sortout", function( event, ui ) {} );

over( event, ui )Type: sortover

This event is triggered when a sortable item is moved into a sortable 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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the over callback specified:

1
2
3
 
$( ".selector" ).sortable({
  over: function( event, ui ) {}
});

Bind an event listener to the sortover event:

1
 
$( ".selector" ).on( "sortover", function( event, ui ) {} );

receive( event, ui )Type: sortreceive

This event is triggered when an item from a connected sortable list has been dropped into another list. The latter is the event target.
  • 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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the receive callback specified:

1
2
3
 
$( ".selector" ).sortable({
  receive: function( event, ui ) {}
});

Bind an event listener to the sortreceive event:

1
 
$( ".selector" ).on( "sortreceive", function( event, ui ) {} );

remove( event, ui )Type: sortremove

This event is triggered when a sortable item from the list has been dropped into another. The former is the event target.
  • 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 }.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the remove callback specified:

1
2
3
 
$( ".selector" ).sortable({
  remove: function( event, ui ) {}
});

Bind an event listener to the sortremove event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the sort callback specified:

1
2
3
 
$( ".selector" ).sortable({
  sort: function( event, ui ) {}
});

Bind an event listener to the sort event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the start callback specified:

1
2
3
 
$( ".selector" ).sortable({
  start: function( event, ui ) {}
});

Bind an event listener to the sortstart event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the stop callback specified:

1
2
3
 
$( ".selector" ).sortable({
  stop: function( event, ui ) {}
});

Bind an event listener to the sortstop event:

1
 
$( ".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.
    • placeholder
      Type: jQuery
      The jQuery object representing the element being used as a placeholder.
Code examples:

Initialize the sortable with the update callback specified:

1
2
3
 
$( ".selector" ).sortable({
  update: function( event, ui ) {}
});

Bind an event listener to the sortupdate event:

1
 
$( ".selector" ).on( "sortupdate", function( event, ui ) {} );

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="./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>

Demo: