​
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 Droppable class to create droppable targets for draggable elements.

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 droppable.

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

const manager = new DragDropManager();

const element = document.createElement('div');
element.style.width = '200px';
element.style.height = '200px';

const droppable = new Droppable({
  id: 'droppable',
  element,
}, manager);

In order for our droppable element to receive draggable elements, you’ll need to create some Draggable elements.

​
Detecting collisions

By default, the Droppable class uses a simple bounding box collision detection algorithm to detect collisions between the droppable element and the active draggable source element:

You can customize this behavior by supplying a custom collision detector function. The built-in collision detectors are:

  • shapeIntersection
  • pointerIntersection
  • closestCenter
  • directionBiased

For example, you can import the closestCenter collision detector from the @dnd-kit/collision package:

import {Droppable, DragDropManager} from '@dnd-kit/dom';
import {closestCenter} from '@dnd-kit/collision';

const manager = new DragDropManager();
const droppable = new Droppable({
  id: 'droppable',
  collisionDetector: closestCenter,
}, manager);

This collision detection algorithm will detect collisions based on the distance between the center of the droppable element and the center of the active draggable source element:

​
Prioritizing collisions

You can prioritize collisions between droppable elements by supplying a collisionPriority number to the Droppable class. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap, or if you want to prioritize certain droppable elements over others.

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

const manager = new DragDropManager();

const firstDroppable = new Droppable({
  id: '1',
  collisionPriority: 1,
}, manager);
const secondDroppable = new Droppable({
  id: '2',
  collisionPriority: 2,
}, manager);

​
API Reference

​
Arguments

The Droppable class accepts the following arguments:

id
string | number
required

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

element
Element

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

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 droppable element from being a drop target.

data
{[key: string]: any}

The data argument is for advanced use-cases where you may need access to additional data about the droppable 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.

DraggableSortable