Draggable
Make elements draggable to drop them over droppable targets.
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.
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:
The identifier of the draggable element. Should be unique within the same drag and drop context provider.
Optionally supply a type to only allow this draggable element to be dropped over droppable targets that accept this type
.
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.
Optionally supply a drag handle element to restrict initiating dragging to a specific element. If not provided, the entire element
will be draggable.
Set to true
to prevent the draggable element from being draggable.
The type of feedback that should be displayed when the element is being dragged.
An array of modifiers that can be used to modify or restrict the behavior of the draggable element.
An array of sensors that can be bound to the draggable element to detect drag interactions.
destroy()
method of this instance.