​
Usage

First, we’ll create a new DragDropManager instance. This is the orchestrator of the drag and drop system. It manages the state of all draggable and droppable elements, and coordinates the events between them.

Then, we’ll import the Draggable class to make elements draggable and allow them to be dropped over droppable targets.

The id argument is required, and needs to be unique within this manager. We’ll also need to supply a reference to the element we want to make draggable.

import {Draggable, DragDropManager} from '@dnd-kit/dom';

const manager = new DragDropManager();

const element = document.createElement('button');
element.innerText = 'Draggable';

const draggable = new Draggable({
  id: 'draggable',
  element,
}, manager);

document.body.appendChild(element);

In order to drop the draggable element over a droppable target, you’ll need to create a Droppable element.

​
API Reference

​
Arguments

The Draggable class accepts the following arguments:

id
string | number
required

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

type
string | number | Symbol

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

element
Element

The element that should be made draggable. While this paramater is not required in the constructor, it is required to make the element draggable. 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.

disabled
boolean

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

feedback
'default' | 'clone' | 'move' | 'none'

The type of feedback that should be displayed when the element is being dragged.

modifiers
Modifier[]

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

sensors
Sensors[]

An array of sensors that can be bound to the draggable 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 draggable element in event handlers, modifiers, sensors or 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.

ManagerDroppable