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 SortableGive 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
Example: jQuery UI Sortable Interaction - Getting the Sortable OrderGive 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
|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 SortablesGive 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 ElementGive 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 ItemsGive 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.