Droppable
Create droppable targets for draggable elements.
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.
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:
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.
API Reference
Arguments
The Droppable
class accepts the following arguments:
The identifier of the droppable element. Should be unique within the same drag and drop context provider.
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.
Optionally supply a type of draggable element to only allow it to be dropped over certina droppable targets that accept this type
.
Optionally supply a collision detector function can be used to detect collisions between the droppable element and draggable elements.
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.
Set to true
to prevent the droppable element from being a drop target.
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.
destroy()
method of this instance.