Reorder elements in a list or across multiple lists.
Sortable
class allows you to reorder elements in a list or across multiple lists. A sortable element is both Droppable and Draggable, which means you can drag it and drop it to reorder.
First, create a DragDropManager instance and use it to create sortable items:
transition
option:
Sortable
class accepts the following arguments:
true
to temporarily disable sorting for this item.Sortable
instance provides these key properties:
index
: The current position in the listgroup
: The assigned group identifierisDragging
: Whether this item is currently being draggedisDropTarget
: Whether this item is currently a drop targetdisabled
: Whether sorting is disabled for this itemelement
: The main DOM elementtarget
: The drop target element (if different from main element)register()
: Register this sortable item with the managerunregister()
: Remove this item from the managerdestroy()
: Clean up this sortable instanceaccepts(draggable)
: Check if this item accepts a draggablerefreshShape()
: Recalculate the item’s dimensions