Droppable Targets - Core Concepts

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 accepts property. See the draggable types documentation for more details.

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

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

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

Collision Detection

By default, the Droppable class uses rectangle intersection to detect when draggable elements are over the drop target:

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:

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.

accepts

string | number | Symbol | ((draggable: Draggable) => boolean)

Specify which draggable elements can be dropped on this target. See accepting specific types for more details.

collisionDetector

CollisionDetector

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

shapeIntersection: Default, 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[]

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.

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