zoom_in Click to enlarge

jQuery UI Sortable

▲ ▼

language

description jQuery UI Sortable Overview

jQuery UI Sortable is an interaction component within the jQuery UI JavaScript library that enables mouse-based drag-and-drop reordering of elements in lists or grids. It allows front-end web developers to build interfaces where users can rearrange items by clicking and dragging them to new positions. The component supports features such as placeholder elements, sorting across multiple connected lists, and customizable drag handles. It is utilized by web developers building highly interactive user interfaces who already rely on the jQuery framework.

help jQuery UI Sortable FAQ

How do I enable drag-and-drop reordering with jQuery UI Sortable?

Call `.sortable()` on the list or grid container, such as `$('#items').sortable()`, after loading jQuery and jQuery UI. Each sortable child is then treated as a draggable item that can be repositioned with the mouse.

How can jQuery UI Sortable move items between two lists?

Set the `connectWith` option on both sortable containers using the same selector, because the relationship otherwise works in only one direction. The jQuery UI API specifically documents `connectWith` for connected sortable elements.

Which jQuery UI Sortable event tells me that an item was reordered?

The `update` event fires when the sort order changes, making it a suitable place to save the new order to a server. When items move between connected lists, `receive` and `remove` can also identify the cross-list change.

Can jQuery UI Sortable restrict dragging to a handle?

Yes, the `handle` option can limit dragging to a child element such as `.drag-handle` instead of making the whole item draggable. This is useful when list rows contain buttons, links, or text fields that must remain clickable.

swap_horiz

Looking for jQuery UI Sortable alternatives? Compare top competitors ranked & scored

arrow_forward