jQuery UI Sortable - Default Demo

Completely exclude items from the sorting logic using the 'items' option

Specify which items are sortable:

Item 1
(I'm not sortable)
(I'm not sortable)
(I'm not sortable or a drop target)
(I'm not sortable or a drop target)
Item 4

Keep the items as valid targets, but non-draggable, using the 'cancel' option

Cancel sorting (but keep as drop targets):

Item 1

- -

Specify which items are eligible to sort by passing a jQuery selector into the items option. Items excluded from this option are not sortable, nor are they valid targets for sortable items.

To only prevent sorting on certain items, pass a jQuery selector into the cancel option. Cancelled items remain valid sort targets for others.

jQuery UI Sortable - Placeholder Demo

jQuery UI Sortable - Drop placeholder

- -

When dragging a sortable item to a new location, other items will make room for the that item by shifting to allow white space between them. Pass a class into the placeholder option to style that space to be visible. Use the boolean forcePlaceholderSize option to set dimensions on the placeholder.

jQuery UI Sortable - Tolerance Demo

jQuery UI Sortable - Drop tolerance (stickiness)

- -

Set the stickiness of drop areas using the tolerance option. Specify whether the drop should occur when either the pointer or intersection (mid-point of the sortable item) crosses the drop area's boundary. By default, the script guesses which option is best to use for each drag.

Examples

Specify which items are sortable:

Cancel sorting (but keep as drop targets):