Sortable Widget

jQuery

previous page next page

Sortable Widget

Categories: Interactions

Sortable Widget version added: 1.0

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

QuickNavExamples

Options

appendTo
axis
cancel
connectWith
containment
cursor
cursorAt
delay
disabled
distance
dropOnEmpty
forceHelperSize
forcePlaceholderSize
grid
handle
helper
items
opacity
placeholder
revert
scroll
scrollSensitivity
scrollSpeed
tolerance
zIndex

Methods

cancel
destroy
disable
enable
option
refresh
refreshPositions
serialize
toArray
widget

Events

create
start
sort
change
beforeStop
stop
update
receive
remove
over
out
activate
deactivate

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

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:

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

containmentType: 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
$( ".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" );

cursorType: String

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

Initialize the sortable with the cursor option specified:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

                                      $( ".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 } );

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:

1
 
                                  

                                    

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

disabledType: Boolean

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

Initialize the sortable with the disabled option specified:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

forceHelperSizeType: Boolean

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

Initialize the sortable with the forceHelperSize option specified:

1
 
                                  

                                    

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

forcePlaceholderSizeType: Boolean

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

Initialize the sortable with the forcePlaceholderSize option specified:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

                                      $( ".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 ] );

handleType: Selector or Element

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

Initialize the sortable with the handle option specified:

1
 
                                  

                                    

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

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:

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

itemsType: Selector

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

Initialize the sortable with the items option specified:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

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:

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

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:

1
 
                                  

                                    

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

zIndexType: Integer

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

Initialize the sortable with the zIndex option specified:

1
 
                                  

                                    

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

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()

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()

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

Invoke the disable method:

1
 
                                      

                                        

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

enable()

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 method does not accept any arguments.
Code examples:

Invoke the method:

1
 
                                      

                                        

                                          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:

1
 
                                      

                                        

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

1
 
                                      

                                        

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

1
 
                                      

                                        

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

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

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

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

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
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
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
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
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="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/ui/1.10.1/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>
 POWERED BYHERONOTE
previous page start next page