jQuery UI API - Sortable Widget

Category

Interactions

Usage

Description:Use the mouse to adjust the order of elements in a list or grid.

Added in version:1.0

Dependencies:

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

Notes:In order to sort table rows,tbodymust be sortable, nottable。

Quick Navigation

Options Methods Events

Options Type Description Default value
appendTo jQuery or Element or Selector or String When dragging, where the helper moved by the mouse should be appended to (for example, to resolve overlap/zIndex issues).

Supports multiple types:

  • jQuery: A jQuery object containing the element to which the helper should be appended.
  • Element: The element to which the helper should be appended.
  • Selector: A selector specifying which element should append the helper.
  • String: String"parent"Will cause the helper to be a sibling of the sortable items.

Code examples:

Initialize the sortable with the specifiedappendTooption:

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

After initialization, get or set theappendTooption:

// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
    
 "parent"
axis String If defined, items can be dragged only horizontally or vertically. Possible values:"x", "y"。

Code examples:

Initialize the sortable with the specifiedaxisoption:

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

After initialization, get or set theaxisoption:

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
    
 false
cancel Selector Prevents sorting from starting on elements matching the selector.

Code examples:

Initialize the sortable with the specifiedcanceloption:

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

After initialization, get or set thecanceloption:

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
    
 "input, textarea, button, select, option"
connectWith Selector Selector of other sortable elements that the items in this list should be connected to. This is a one-way relationship, and if you want items to be connected in both directions, you must set theconnectWithoption on both sortable elements.

Code examples:

Initialize the sortable with the specifiedconnectWithoption:

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

After initialization, get or set theconnectWithoption:

// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
    
 false
containment Element or Selector or String Defines the bounds in which the sortable items are constrained while dragging.

Note: The element specified for containment must have a calculated width and height (although it does not need to be explicit). For example, if you havefloat: leftsortable children and specifycontainment: "parent", make sure you have on the sortable/parent containerfloat: left, otherwise it will haveheight: 0, leading to undefined behavior.

Supports multiple types:

  • Element: An element to be used as a container.
  • Selector: A selector specifying an element to be used as a container.
  • String: A string identifying an element to be used as a container. Possible values:"parent"、"document"、"window"。

Code examples:

Initialize the sortable with the specifiedcontainmentoption:

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

After initialization, get or set thecontainmentoption:

// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
    
 false
cursor String Defines the cursor that is displayed when sorting.

Code examples:

Initialize the sortable with the specifiedcursoroption:

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

After initialization, get or set thecursoroption:

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
    
 "auto"
cursorAt Object Moves the sorted element or helper so that the cursor always appears to drag from the same position. The coordinates can be given as a hash using one or two keys:{ top, left, right, bottom }。

Code examples:

Initialize the sortable with the specifiedcursorAtoption:

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

After initialization, get or set thecursorAtoption:

// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
    
 false
delay Integer Time in milliseconds after mousedown until sorting starts. This option can prevent unwanted dragging when clicking on an element.

Code examples:

Initialize the sortable with the specifieddelayoption:

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

After initialization, get or set thedelayoption:

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
    
 0
disabled Boolean If set totrue, disables the sortable.

Code examples:

Initialize the sortable with the specifieddisabledoption:

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

After initialization, get or set thedisabledoption:

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );
    
 false
distance Number Distance in pixels after mousedown the mouse must move before sorting starts. If specified, sorting will only start when the mouse is dragged beyond the specified distance. This option can be used to allow clicks on elements within a handle.

Code examples:

Initialize the sortable with the specifieddistanceoption:

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

After initialization, get or set thedistanceoption:

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
    
 1
dropOnEmpty Boolean If set tofalse, items from this sortable cannot be dropped on an empty connected sortable (see theconnectWithoption).

Code examples:

Initialize the sortable with the specifieddropOnEmptyoption:

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

After initialization, get or set thedropOnEmptyoption:

// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
    
 true
forceHelperSize Boolean If set totrue, forces the helper to have a size.

Code examples:

Initialize the sortable with the specifiedforceHelperSizeoption:

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

After initialization, get or set theforceHelperSizeoption:

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
    
 false
forcePlaceholderSize Boolean If set totrue, forces the placeholder to have a size.

Code examples:

Initialize the sortable with the specifiedforcePlaceholderSizeoption:

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

After initialization, get or set theforcePlaceholderSizeoption:

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    
 false
grid Array Snaps the sorted element or helper to a grid, every x and y pixels. The array must be in the form[ x, y ]。

Code examples:

Initialize the sortable with the specifiedgridoption:

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

After initialization, get or set thegridoption:

// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
    
 false
handle Selector or Element If specified, restricts sorting start to the specified element.

Code examples:

Initialize the sortable with the specifiedhandleoption:

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

After initialization, get or set thehandleoption:

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
    
 false
helper String or Function() Allows a helper element to be used for drag 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 when dragging. The function receives the event and the element being sorted.

Code examples:

Initialize the sortable with the specifiedhelperoption:

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

After initialization, get or set thehelperoption:

// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
    
 "original"
items Selector Which items within the element should be sortable.

Code examples:

Initialize the sortable with the specifieditemsoption:

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

After initialization, get or set theitemsoption:

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
    
 "> *"
opacity Number The opacity of the helper when sorting. From0.01to1。

Code examples:

Initialize the sortable with the specifiedopacityoption:

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

After initialization, get or set theopacityoption:

// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
    
 false
placeholder String The class name to apply, otherwise white blank.

Code example:

Initialize with the specifiedplaceholderoptions for the sortable:

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

After initialization, get or setplaceholderoption:

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
    
 false
revert Boolean or Number Whether sortable items use a smooth animation to return to their new position.

Supports multiple types:

  • BooleanWhen set totrue, the item will use animation with the default duration.
  • Number: The duration of the animation, in milliseconds.

Code example:

Initialize with the specifiedrevertoptions for the sortable:

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

After initialization, get or setrevertoption:

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );
    
 false
scroll Boolean If set totrue, the page will scroll when the edge is reached.

Code example:

Initialize with the specifiedscrolloptions for the sortable:

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

After initialization, get or setscrolloption:

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );
    
 true
scrollSensitivity Number Defines how far from the edge the mouse must be for scrolling to start.

Code example:

Initialize with the specifiedscrollSensitivityoptions for the sortable:

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

After initialization, get or setscrollSensitivityoption:

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
    
 20
scrollSpeed Number When the mouse pointer is withinscrollSensitivitydistance, the speed at which the window scrolls. Ifscrolloption isfalsethen it is ignored.

Code example:

Initialize with the specifiedscrollSpeedoptions for the sortable:

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

After initialization, get or setscrollSpeedoption:

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    
 20
tolerance String Specifies the mode used to test whether a moving item is overlapping another item. Possible values:
  • "intersect": The item overlaps the other item by at least 50%.
  • "pointer": The mouse pointer overlaps the other item.

Code example:

Initialize with the specifiedtoleranceoptions for the sortable:

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

After initialization, get or settoleranceoption:

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
    
 "intersect"
zIndex Integer The Z-index of the element/helper while being sorted.

Code example:

Initialize with the specifiedzIndexoptions for the sortable:

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

After initialization, get or setzIndexoption:

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

Methods Returns Description
cancel() jQuery (plugin only) Cancel a change in the current sortable during the current sort and revert to the previous state. Useful in the stop and receive callbacks.
  • This method does not accept any arguments.

Code example:

Calling the cancel method:

$( ".selector" ).sortable( "cancel" );
    
destroy() jQuery (plugin only) Completely remove the sortable functionality. This returns the element to its pre-init state.
  • This method does not accept any arguments.

Code example:

Calling the destroy method:

$( ".selector" ).sortable( "destroy" );
    
disable() jQuery (plugin only) Disable the sortable.
  • This method does not accept any arguments.

Code example:

Calling the disable method:

$( ".selector" ).sortable( "disable" );
    
enable() jQuery (plugin only) Enable the sortable.
  • This method does not accept any arguments.

Code example:

Calling the enable method:

$( ".selector" ).sortable( "enable" );
    
option( optionName ) Object Get the value currently associated with the specifiedoptionName.
  • optionName
    Type: String
    Description: The name of the option to get.

Code example:

Calling this method:

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
    
option() PlainObject Get an object containing key/value pairs that represent the current draggable option hash.
  • This method does not accept any arguments.

Code example:

Calling this method:

var options = $( ".selector" ).sortable( "option" );
    
option( optionName, value ) jQuery (plugin only) Set the sortable option value associated with the specifiedoptionName.
  • optionName
    Type: String
    Description: The name of the option to set.
  • value
    Type: Object
    Description: The value to set for the option.

Code example:

Calling this method:

$( ".selector" ).sortable( "option", "disabled", true );
    
option( options ) jQuery (plugin only) Set one or more options for the sortable.
  • options
    Type: Object
    Description: The option-value pairs to set.

Code example:

Calling this method:

$( ".selector" ).sortable( "option", { disabled: true } );
    
refresh() jQuery (plugin only) Refresh the sortable items. Triggers a reload of all sortable items, causing new items to be recognized.
  • This method does not accept any arguments.

Code example:

Calling the refresh method:

$( ".selector" ).sortable( "refresh" );
    
refreshPositions() jQuery (plugin only) Refresh the cached positions of the sortable items. Calling this method refreshes the cached positions of all sortable items.
  • This method does not accept any arguments.

Code example:

Calling the refreshPositions method:

$( ".selector" ).sortable( "refreshPositions" );
    
serialize( options ) String Serialize the sortable itemsidinto 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.

By default, it works via each item'sidattribute, with the format"setname_number", and it produces a hash of the form"setname[]=number&setname[]=number".

Note: If serialization returns an empty string, make sureidattribute contains an underscore (_). The format must be"set_number". For example, aidattribute of"foo_1"、"foo_5"、"foo_2"with 3 elements will serialize as"foo[]=1&foo[]=5&foo[]=2". You can use underscores (_), equals signs (=), or hyphens (-) to separate the set and the number. For example,"foo=1"、"foo-1"、"foo_1"all serialize to"foo[]=1"。

  • options
    Type: Object
    Options to customize the serialization.
    • key(Default:The part before the delimiter in the attribute）
      Type: String
      Description: Replacepart1[]with the specified value.
    • attribute(Default:"id"）
      Type: String
      Description: The attribute name to use for the value.
    • expression(Default:/(.+)[-=_](.+)/）
      Type: RegExp
      Description: A regular expression for separating the attribute value into a key and a value.

Code example:

Calling the serialize method:

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
    
toArray( options ) Array Serialize the sortable itemsidinto an array of strings.
  • options
    Type: Object
    Options to customize the serialization.
    • attribute(Default:"id"）
      Type: String
      Description: The attribute name to use for the value.

Code example:

Calling the toArray method:

var sortedIDs = $( ".selector" ).sortable( "toArray" );
    
widget() jQuery Returns ajQueryobject containing the sortable elements.
  • This method does not accept any arguments.

Code example:

Calling the widget method:

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

Events Type Description
activate( event, ui ) sortactivate This event is triggered when using connected lists, each connected list receives it at the start of the drag.
  • 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: 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 moving from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as a placeholder.

Code example:

Initialize the sortable with the specified activate callback:

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

Bind an event listener to the sortactivate event:

$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
    
beforeStop( event, ui ) sortbeforestop This event is triggered when sorting stops, except when the placeholder/helper is still available.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: If moved from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as placeholder.

Code example:

Initialize a sortable with the specified beforeStop callback:

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

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.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: If moved from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as placeholder.

Code example:

Initialize a sortable with the specified change callback:

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

Bind an event listener to the sortchange event:

$( ".selector" ).on( "sortchange", function( event, ui ) {} );
    
create( event, ui ) sortcreate Triggered when the droppable is created.
  • event
    Type: Event
  • ui
    Type: Object

Note:uiThe object is empty; it is included for consistency with other events.

Code example:

Initialize a sortable with the specified create callback:

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

Bind an event listener to the sortcreate event:

$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
    
deactivate( event, ui ) sortdeactivate Triggered when sorting stops, and this event propagates to all possible connected lists.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: If moved from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as placeholder.

Code example:

Initialize a sortable with the specified deactivate callback:

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

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.

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

  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: If moved from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as placeholder.

Code example:

Initialize a sortable with the specified out callback:

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

Bind an event listener to the sortout event:

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
over( event, ui ) sortover Triggered when a sortable item moves to a sortable list.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: If moved from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as placeholder.

Code example:

Initialize a sortable with the specified over callback:

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

Bind an event listener to the sortover event:

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
receive( event, ui ) sortreceive Triggered when an item from a connected sortable list is placed into another list. The latter is the event target.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: If moved from one sortable to another, the sortable from which the item came.
    • placeholder
      Type: jQuery
      Description: jQuery object representing the element used as placeholder.

Code example:

Initialize a sortable with the 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 placed into another list. The former is the event target.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: jQuery object representing the sorted helper.
    • 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: The helper's current position, expressed as{ top, left }。
    • originalPosition
      Type: Object
      Description: The element's original position, expressed as{ top, left }。
    • placeholder
      Type: jQuery
      Description: A jQuery object representing the element being used as a placeholder.

Code example:

Initialize a sortable with the 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 This event is triggered during sorting.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being sorted.
    • item
      Type: jQuery
      Description: A jQuery object representing the element currently being dragged.
    • offset
      Type: Object
      Description: The helper's current absolute position, expressed as{ top, left }。
    • position
      Type: Object
      Description: The helper's current position, expressed as{ top, left }。
    • originalPosition
      Type: Object
      Description: The element's original position, expressed as{ top, left }。
    • sender
      Type: jQuery
      Description: If moving from one sortable to another, the sortable that the item came from.
    • placeholder
      Type: jQuery
      Description: A jQuery object representing the element being used as a placeholder.

Code example:

Initialize a sortable with the 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 This event is triggered when sorting starts.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being sorted.
    • item
      Type: jQuery
      Description: A jQuery object representing the element currently being dragged.
    • offset
      Type: Object
      Description: The helper's current absolute position, expressed as{ top, left }。
    • position
      Type: Object
      Description: The helper's current position, expressed as{ top, left }。
    • originalPosition
      Type: Object
      Description: The element's original position, expressed as{ top, left }。
    • sender
      Type: jQuery
      Description: If moving from one sortable to another, the sortable that the item came from.
    • placeholder
      Type: jQuery
      Description: A jQuery object representing the element being used as a placeholder.

Code example:

Initialize a sortable with the 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 This event is triggered when sorting stops.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being sorted.
    • item
      Type: jQuery
      Description: A jQuery object representing the element currently being dragged.
    • offset
      Type: Object
      Description: The helper's current absolute position, expressed as{ top, left }。
    • position
      Type: Object
      Description: The helper's current position, expressed as{ top, left }。
    • originalPosition
      Type: Object
      Description: The element's original position, expressed as{ top, left }。
    • sender
      Type: jQuery
      Description: If moving from one sortable to another, the sortable that the item came from.
    • placeholder
      Type: jQuery
      Description: A jQuery object representing the element being used as a placeholder.

Code example:

Initialize a sortable with the 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 This event is triggered when the user stops sorting and the DOM position has changed.
  • event
    Type: Event
  • ui
    Type: Object
    • helper
      Type: jQuery
      Description: A jQuery object representing the helper being sorted.
    • item
      Type: jQuery
      Description: A jQuery object representing the element currently being dragged.
    • offset
      Type: Object
      Description: The helper's current absolute position, expressed as{ top, left }。
    • position
      Type: Object
      Description: The helper's current position, expressed as{ top, left }。
    • originalPosition
      Type: Object
      Description: The element's original position, expressed as{ top, left }。
    • sender
      Type: jQuery
      Description: If moving from one sortable to another, the sortable that the item came from.
    • placeholder
      Type: jQuery
      Description: A jQuery object representing the element being used as a placeholder.

Code example:

Initialize a 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 ) {} );
    

Examples

A simple jQuery UI Sortable Widget.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可排序小部件（Sortable Widget）演示</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>

Other Extensions