​
Usage

The Sortable class allows you to reorder elements in a list or across multiple lists. Sortable elements are both Droppable and Draggable. The Sortable class is a thin wrapper that composes the Draggable and Droppable classes to make it simple to create sortable lists.

import {DragDropManager} from '@dnd-kit/dom';
import {Sortable} from '@dnd-kit/dom/sortable';

const manager = new DragDropManager();

const wrapper = document.createElement('ul');
const items = ['Item 1', 'Item 2', 'Item 3'];

items.forEach((item) => {
  const element = document.createElement('li');
  element.innerText = item;

  const sortable = new Sortable({
    id: item,
    element,
  }, manager);

  wrapper.appendChild(element);
});

document.body.appendChild(wrapper);

​
API Reference

​
Arguments

The Sortable class accepts the following arguments:

id
string | number
required

The identifier of the sortable element. Should be unique within the same drag and drop context provider.

element
Element

The element that should be made sortable. While this paramater is not required in the constructor, it is required to make the element sortable. You can update the element on the instance after creating it.

handle
Element

Optionally supply a drag handle element to restrict initiating dragging to a specific element. If not provided, the entire element will be draggable.

type
string | number | Symbol

Optionally supply a type to only allow this sortable element to only be dropped over droppable targets that accept this type.

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

Optionally supply a type of draggable element to only allow it to be dropped over certina droppable targets that accept this type.

collisionDetector
(input: CollisionDetectorInput) => Collision | null

Optionally supply a collision detector function can be used to detect collisions between the droppable element and draggable elements.

collisionPriority
number

Optionally supply a number to set the collision priority of the droppable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.

disabled
boolean

Set to true to prevent the sortable element from being sortable.

modifiers
Modifier[]

An array of modifiers that can be used to modify or restrict the behavior of the sortable element.

sensors
Sensors[]

An array of sensors that can be bound to the sortable element to detect drag interactions.

data
{[key: string]: any}

The data argument is for advanced use-cases where you may need access to additional data about the sortable element in event handlers, modifiers, sensors or custom plugins.

effects
(manager: DragDropManager) => Effect[]

This is an advanced feature and should not need to be used by most consumers.
You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the destroy() method of this instance.

DroppablePlugins