jQuery UI Library Sortable

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • $("#sortable").sortable({ /*Options Here*/ }); //Initialise Sortable

  • $("#sortable").sortable("option", "option_name", option_value); //Set option outside initialiser

  • var value = $("#sortable").sortable("option", "option_name"); //Gets the value of an option

Parameters

ParameterDescription
Options 
appendTo(jQuery, Element, Selector, String) [Default: "parent"] The element that the helper is added to
axis(String) [Default: false] The directions that the item can be dragged (x or y)
cancel(Selector) [Default: "input,textarea,button,select,option"] Doesnt start sorting if you start on an element matching the selector
classes(Object) [Default: {}] Specify additional classes to add to the sortables elements when the structural classes are added. ({ui-sortable-helper: custom_class})
connectWith(Selector) [Default: false] Allows to items from one sortable to be dragged to another
containment(Element, Selector, String) [Default: false] The element that items are constrained to
cursor(String) [Default: "auto"] Defines the type of cursor to be shown when sorting
cursorAt(Object) [Default: false] Defines the position that the helper looks like its being moved from
disabled(Boolean) [Default: false] Disables the sorting if true
dropOnEmpty(Boolean) [Default: true] If false items from this sortable can not be placed in empty sortables
forceHelperSize(Boolean) [Default: false] Forces the helper to have a size
forcePlaceholderSize(Boolean) [Default: false] Forces the placeholder to have a size
grid(Array) [Default: false] Defines a grid to snap the helper to ([ x,y ])
handle(Selector, Element) [Default: false] Defines elements that sorting can start on. Opposite to cancel
helper(String, Function) [Default: "original"] String "original" or "clone", or function that returns the element to be used as the helper.
items(Selector) [Default: "> *"] Defines the items that should be sortable
opacity(Number 0.01 to 1) [Default: false] Defines the opacity for the helper
placeholder(String) [Default: false] Defines a class or classes to be applied to the placeholder
revert(Boolean, Number) [Default: false] The time that it takes the helper to slide into its new position
scroll(Boolean) [Default: true] Whether to scroll when at edges of the page
scrollSensitivity(Number) [Default: 20] Defines how close to the edge of the page the cursor needs to be to start scrolling
scrollSpeed(Number) [Default: 20] The speed at which to scroll
tolerance(String) [Default: "intersect"] Defines which mode to use when calculating when one item is over another ("intersect" or "pointer")
zIndex(Integer) [Default: 1000] Defines the z-index of the helper when sorting
Methods 
cancel()Cancels the current sort and returns the elements back to their position before the sort started
destroy()Removes the sortable functionality and returns the element to its state pre initialisation
disable()Disables the sortable
enable()Enables the sortable
instance()Returns the sortables instance object
option()Gets key value pairs of all the options for the sortable
option(String)Gets the value of an option
option(String, Any)Sets the value of the option specified by the String
option(Object)Sets one or more options with the object being key value pairs of options
refresh()Refreshes the sortable options reloading all sortable items. This causes new items to be recognised
refreshPositions()Rrefreses the cached positions of the sortable items
serialize(Object)Serializes the items ids (by default) into a string that can be submitted or appended to a url Object options: {key: sets the key in the serialized string, attribute:[Default "id"] sets the attribute to look at, expression:[Default: "/(.+)-=_/"] regex to split the attribute in to key value pairs}
toArray(Object)Serializes the sortable items id into an array. The object can contain a parameter attribute which has the attribute to put into the array default is id
widget()Returns a jQuery object of the sortable element
Events 
activate(event, ui)Triggered when connected list, every connected list on drag start receives it
beforeStop(event, ui)Triggers before sorting stops when the helper has being shiftered to the same position as the placeholder
change(event, ui)Triggered when elements change position ie. when the placeholder moves
create(event, ui)Triggered when sortable is created
deactivate(event, ui)Triggered when sorting stops. This goes to all connected lists as well
out(event, ui)Triggered when the item is moved out of the sortable list
over(event, ui)Triggered when the item is moved into a sortable list
receive(event, ui)Triggered when an item from a connected list has being dropped into another one. Target is the receiving list
remove(event, ui)Triggered when an item from a connected list has being dropped into another one. Target is the giving list
sort(event, ui)Triggered during sorting
start(event, ui)Triggered when sorting starts
stop(event, ui)Triggered when sorting stops
update(event, ui)Triggered when sorting stops and the DOM position has being updated

Remarks

Official Documentation here



Got any jQuery UI Library Question?