Search within TutorialsPark

jQuery UI : Sortable Methods


Learn how to use jQuery UI Sortable Methods to manipulate and Control Sortable Interaction.


jQuery UI Sortable Interaction : Methods

The jQuery UI sortable Interaction provides a set of methods which can be used to manipulate and Control Sortable Interactions

Table: jQuery UI Sortable Interactions Methods

Settings Description
sortable("destroy") To remove the interaction from the element.
sortable("disable") To Disable Sortable Interaction.
sortable("enable") To enable Sortable Interactions.
sortable("options") To set one or multipe sortable Interaction Settings
sortable("toArray") To get an array containing the sorted set of id Attributes values.
sortable("refresh") To refresh a sortable Interaction
sortable("cancel") To cancel a sort operation

jQuery UI Sortable Interaction : Cancel a Sort

The jQuery UI Sortable Interaction method of cancel is used to prevent elements from getting sorted, it ignores all actions taken by the user.It is often used in conjunction with update event.

In the demo, the cancel method is called if the country china is not in the first position.The event update gets triggered when the mouse button is released after dragging the element to new order.

Example: jQuery UI Sortable Interaction - Cancelling a Sort

Give it a TRY! » Note:Try to change the position to first element to see the alert pop-up


jQuery UI Sortable Interaction : Refreshing Sortable Elements

The jQuery UI Sorting Interaction method of refresh is used to refresh the status of all the sortable Elements in the container.

In the demo, the button is used to add new items to the sortable container, and then use refresh method to ensure that the items are sorted.

Example: jQuery UI Sortable Interaction - Refreshing the Sortable Elements

Give it a TRY! » Note:Add new sortable items by pressing the button, the method refresh shows new changes.


jQuery UI Sortable Interaction : Serialize Items

The jQuery UI Sortable Interaction Method of serialize can be used to create a series of sortable elements, and display the order.

Similarly, the method toArray is used to return an array containing the sorted set of id attributes values.

Example: jQuery UI Sortable Interaction - Serialize Items

Give it a TRY! » Note:The serialize method can also be configured using various types of options


jQuery UI Sortable Interaction : Compatibility of multiple Widgets.

jQuery UI Sortable Interaction can be used in combination with other Widgets to create great Effects.

In the demo below , we have used two methods of tabs() and sortable() on the same outer element.

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: The Tabs can be sorted to any order.