​
Usage

The 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:

​
Multiple Lists

You can create multiple sortable lists by assigning sortable items to different groups:

const list1 = ['Item 1', 'Item 2'];
const list2 = ['Item 3', 'Item 4'];

// First list
list1.forEach((item, index) => {
  new Sortable({
    id: item,
    index,
    group: 'list1', // Assign to first group
    element: createItemElement(item),
  }, manager);
});

// Second list
list2.forEach((item, index) => {
  new Sortable({
    id: item,
    index,
    group: 'list2', // Assign to second group
    element: createItemElement(item),
  }, manager);
});

​
Drag Handles

By default, the entire sortable element can be used to initiate dragging. You can restrict dragging to a specific handle element:

const element = document.createElement('li');
const handle = document.createElement('div');
handle.classList.add('handle');

element.appendChild(handle);

new Sortable({
  id: 'item-1',
  index: 0,
  element,
  handle, // Only allow dragging from the handle
}, manager);

​
Animations

Sortable items automatically animate when their position changes. You can customize the animation through the transition option:

new Sortable({
  id: 'item-1',
  index: 0,
  transition: {
    duration: 250, // Animation duration in ms
    easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // Animation easing
    idle: false, // Whether to animate when no drag is in progress
  }
}, manager);

​
API Reference

​
Arguments

The Sortable class accepts the following arguments:

​
id
string | number
required

A unique identifier for this sortable item within the drag and drop manager.

​
index
number
required

The position of this item within its sortable group.

​
element
Element

The DOM element to make sortable. While not required in the constructor, it must be set to enable sorting.

​
group
string | number

Optionally assign this item to a group. Items can only be sorted within their group.

​
handle
Element

Optionally specify a drag handle element. If not provided, the entire element will be draggable.

​
target
Element

Optionally specify a different element to use as the drop target. By default, uses the main element.

​
transition
SortableTransition | null

Configure the animation when items are reordered:

interface SortableTransition {
  duration?: number; // Duration in ms (default: 250)
  easing?: string;  // CSS easing function (default: cubic-bezier)
  idle?: boolean;   // Animate when not dragging (default: false)
}
​
disabled
boolean

Set to true to temporarily disable sorting for this item.

​
type
string | number | Symbol

Optionally restrict which types of items can be sorted together.

​
accepts
string | number | Symbol | ((type) => boolean)

Optionally restrict which types of items can be dropped on this item.

​
modifiers
Modifier[]

An array of modifiers to customize drag behavior.

​
sensors
Sensors[]

An array of sensors to detect drag interactions.

​
data
{[key: string]: any}

Optional data to associate with this sortable item, available in event handlers.

​
Properties

The Sortable instance provides these key properties:

  • index: The current position in the list
  • group: The assigned group identifier
  • isDragging: Whether this item is currently being dragged
  • isDropTarget: Whether this item is currently a drop target
  • disabled: Whether sorting is disabled for this item
  • element: The main DOM element
  • target: The drop target element (if different from main element)

​
Methods

  • register(): Register this sortable item with the manager
  • unregister(): Remove this item from the manager
  • destroy(): Clean up this sortable instance
  • accepts(draggable): Check if this item accepts a draggable
  • refreshShape(): Recalculate the item’s dimensions

​
Usage

The 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:

​
Multiple Lists

You can create multiple sortable lists by assigning sortable items to different groups:

const list1 = ['Item 1', 'Item 2'];
const list2 = ['Item 3', 'Item 4'];

// First list
list1.forEach((item, index) => {
  new Sortable({
    id: item,
    index,
    group: 'list1', // Assign to first group
    element: createItemElement(item),
  }, manager);
});

// Second list
list2.forEach((item, index) => {
  new Sortable({
    id: item,
    index,
    group: 'list2', // Assign to second group
    element: createItemElement(item),
  }, manager);
});

​
Drag Handles

By default, the entire sortable element can be used to initiate dragging. You can restrict dragging to a specific handle element:

const element = document.createElement('li');
const handle = document.createElement('div');
handle.classList.add('handle');

element.appendChild(handle);

new Sortable({
  id: 'item-1',
  index: 0,
  element,
  handle, // Only allow dragging from the handle
}, manager);

​
Animations

Sortable items automatically animate when their position changes. You can customize the animation through the transition option:

new Sortable({
  id: 'item-1',
  index: 0,
  transition: {
    duration: 250, // Animation duration in ms
    easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // Animation easing
    idle: false, // Whether to animate when no drag is in progress
  }
}, manager);

​
API Reference

​
Arguments

The Sortable class accepts the following arguments:

​
id
string | number
required

A unique identifier for this sortable item within the drag and drop manager.

​
index
number
required

The position of this item within its sortable group.

​
element
Element

The DOM element to make sortable. While not required in the constructor, it must be set to enable sorting.

​
group
string | number

Optionally assign this item to a group. Items can only be sorted within their group.

​
handle
Element

Optionally specify a drag handle element. If not provided, the entire element will be draggable.

​
target
Element

Optionally specify a different element to use as the drop target. By default, uses the main element.

​
transition
SortableTransition | null

Configure the animation when items are reordered:

interface SortableTransition {
  duration?: number; // Duration in ms (default: 250)
  easing?: string;  // CSS easing function (default: cubic-bezier)
  idle?: boolean;   // Animate when not dragging (default: false)
}
​
disabled
boolean

Set to true to temporarily disable sorting for this item.

​
type
string | number | Symbol

Optionally restrict which types of items can be sorted together.

​
accepts
string | number | Symbol | ((type) => boolean)

Optionally restrict which types of items can be dropped on this item.

​
modifiers
Modifier[]

An array of modifiers to customize drag behavior.

​
sensors
Sensors[]

An array of sensors to detect drag interactions.

​
data
{[key: string]: any}

Optional data to associate with this sortable item, available in event handlers.

​
Properties

The Sortable instance provides these key properties:

  • index: The current position in the list
  • group: The assigned group identifier
  • isDragging: Whether this item is currently being dragged
  • isDropTarget: Whether this item is currently a drop target
  • disabled: Whether sorting is disabled for this item
  • element: The main DOM element
  • target: The drop target element (if different from main element)

​
Methods

  • register(): Register this sortable item with the manager
  • unregister(): Remove this item from the manager
  • destroy(): Clean up this sortable instance
  • accepts(draggable): Check if this item accepts a draggable
  • refreshShape(): Recalculate the item’s dimensions