Search within TutorialsPark

jQuery UI : Sortable Interaction


Learn how to use jQuery UI Sortable Interaction to change the order of elements by Dragging them.


jQuery UI Sortable Interaction : Creating a Sort

The jQuery UI sortable interaction is used to define one or more list items, where the individual items can be reordered by dragging and dropping them around.

In the demo, there are three div Elements upon which the class sortable is applied, but has not interaction effect.To create sort Interaction the method sortable is called upon the parent div Element.

Example: jQuery UI Sortable Interaction - Creating a Sortable

Give it a TRY! » Note:The order of the elements can be altered by simply dragging and dropping elements into new positions.


jQuery UI Sortable Interaction : Getting the Sortable Order

The jQuery UI Sorting Interaction can be used to know the order created by the user by reordering the elements. We use the method toArray to get JavaScript array of the id attribute of the sorted element.

In the demo, we have used the JavaScript to write the current order of elements.

Example: jQuery UI Sortable Interaction - Getting the Sortable Order

Give it a TRY! » Note:The position of elements is counted beginning from the left.


jQuery UI Sortable Interaction : Serialize Items

The sortable Interaction is heavily dependent on the draggable Interaction, which means that draggable interaction settings of axis and tolerance can be applied to create same effects for sortable Interactions as well.

The Table below has a list of settings which are uniquely available for the Sortable Interaction.

Table: jQuery UI Sortable Interactions Configuration

Settings Description
connectWith To specify set another sortable element to connect such that items can be dragged between them.The default value is false, i.e no connection.
dropOnEmpty When set to false, items cannot be dropped on a linked sortable iteraction containing no items. The default value is true
items To specify the items that are sortable using a selector.The default value is >* , i.e all descendants of the element.
placeholder To set a class that will be applied to the element that is created to reserve space while a sortable item is being dragged to its new position.

jQuery UI Sortable Interaction : Connecting Sortable Interaction

The jQuery UI Sorting Interaction allows you to connect two sortable interactions together, enabling the user to drag items between them, using the setting connectWith.

The value for setting connectWith is a selector that matches to the element you want to connect with, by using connectWith setting on both sortable elements you can create a bidirectional connection.

Example: jQuery UI Sortable Interaction - Connecting Sortables

Give it a TRY! » Note:The Two group of sortable items are connected using the setting connectWith


jQuery UI Sortable : Connect Draggable Element to Sortable Element.

jQuery UI Sortable Interaction can also be used to establish a connection between draggable elements and sortable elements, using the setting connectToSortable, the value for which is a selector matching the draggable Element.

In the demo below, the draggable items on the right are connected to sortable list of items on the left end of the screen, thus the draggable items can be added to the sortable list.

Example: jQuery UI Sortable Connecting Draggable Element to Sortable Element

Give it a TRY! » Note:For Better effects we have used the helper setting and assigned it the value of clone


jQuery UI Sortable Interaction : Selecting Sortable Items

jQuery UI Sortable Interaction allows the user to select which items in the container are sortable, using the setting items, the value for which is a selector to match elements for which the sorting is enabled.

In the demo below, the setting items is used to set only the odd numbered items as sortable. Elements which do not match the selector cannot be rearranged.

Example: jQuery UI Sortable Interaction : Selecting Sortable Items

Give it a TRY! » Note: The items at even positions cannot be rearranged.


jQuery UI Sortable Interaction : Styling Empty Space

jQuery UI Sortable Interaction has an option to fill the empty space that is created when a draggable item is dragged from one position to another, using the setting placeholder

In the demo, we have created an CSS class named myPlaceholder to set the height and margin of the empty box. This class is the value of the placeholder setting.

Example: jQuery UI Sortable Interaction : Creating a Placeholder

Give it a TRY! » Note: When any item is dragged, the empty space left behind is filled with the placeholder(i.e class myPlaceholder).