Droppable

Create droppable targets for draggable elements.

Usage

The Droppable class creates drop targets that can receive draggable elements. First, create a DragDropManager instance:

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

const manager = new DragDropManager();

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

// Create a droppable target
const droppable = new Droppable({
  id: 'drop-zone',
  element,
}, manager);

document.body.appendChild(element);

// Listen for drop events
manager.monitor.addEventListener('dragend', (event) => {
  if (event.operation.target?.id === droppable.id) {
    console.log('Item dropped!', event.operation.source);
  }
});

Accepting Specific Types

You can restrict which draggable elements can be dropped by using the accept property. See the draggable types documentation for more details.

// Accept only draggables with type 'item'
const droppable = new Droppable({
  id: 'drop-zone',
  element,
  accept: 'item'
}, manager);

// Accept multiple types
const droppable = new Droppable({
  id: 'drop-zone',
  element,
  accept: ['item', 'card']
}, manager);

// Use a function for custom logic
const droppable = new Droppable({
  id: 'drop-zone',
  element,
  accept: (draggable) => {
    // Custom acceptance logic
    return draggable.type === 'item' && draggable.data.category === 'fruit';
  }
}, manager);

Collision Detection

By default, the Droppable class uses the defaultCollisionDetection algorithm from @dnd-kit/collision: it first checks whether the pointer is over the drop target, and falls back to rectangle intersection when there is no pointer collision (for example, during keyboard-driven drags):

You can customize this behavior with different collision detection algorithms:

import {
  closestCenter,
  pointerIntersection,
  directionBiased
} from '@dnd-kit/collision';

// Use closest center point for card stacking
const droppable = new Droppable({
  id: 'card-stack',
  element,
  collisionDetector: closestCenter
}, manager);

For example, the closestCenter detector will detect collisions based on the distance between the center points, which is ideal for card stacking:

Collision Priority

When multiple droppable targets overlap, you can set priority to determine which one should receive the drop. This is particularly useful for nested containers:

const container = new Droppable({
  id: 'container',
  element: containerElement,
  collisionPriority: 1 // Lower priority
}, manager);

const item = new Droppable({
  id: 'item',
  element: itemElement,
  collisionPriority: 2 // Higher priority
}, manager);

API Reference

Arguments

The Droppable class accepts the following arguments:

id · string | number · required

A unique identifier for this droppable target within the same drag and drop context provider.

element · Element

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

accept · Type | Type[] | ((source: Draggable) => boolean)

Restrict which draggables can be dropped on this target. Pass a single type, an array of types, or a predicate that receives the draggable and returns true to accept it. If omitted, every draggable is accepted. See accepting specific types for more details.

type · string | number | Symbol

An optional identifier to categorize this droppable. Whether a draggable can be dropped on this target is determined by this droppable’s own accept rule checked against the draggable’s type — a droppable’s type is not consulted by accept rules.

collisionDetector · CollisionDetector

A function to determine when draggable elements are over this target. See collision detection for built-in options, such as:

• defaultCollisionDetection: Default, uses pointer intersection with a fallback to rectangle intersection
• shapeIntersection: Uses rectangle intersection
• pointerIntersection: Uses pointer position for precise detection
• closestCenter: Uses center point distance, ideal for card stacking
• directionBiased: Considers drag direction, useful for sortable lists

collisionPriority · number

Priority level when multiple droppable targets overlap. Higher numbers take precedence. See collision priority for more details.

disabled · boolean

Set to true to temporarily prevent dropping on this target.

data · {[key: string]: any}

Optional data to associate with this droppable target, available in event handlers.

effects · () => Effect[]

Properties

The Droppable instance provides these key properties:

• id: The unique identifier
• element: The DOM element acting as the drop target
• disabled: Whether dropping is currently disabled
• isDropTarget: Whether a draggable is currently over this target
• shape: The current bounding shape of the drop target

Methods

• accepts(draggable): Check if this target accepts a draggable element
• refreshShape(): Recalculate the target’s dimensions
• register(): Register this target with the manager
• unregister(): Remove this target from the manager
• destroy(): Clean up this droppable instance and remove all listeners