Skip to main content

You will learn

  1. How to make elements draggable
  2. How to set up droppable targets
  3. How to listen to drag and drop events to move elements

​
Installation

Install @dnd-kit/dom in your project: 
npm install @dnd-kit/dom

​
Creating draggable elements

Let’s get started by creating draggable elements that can be dropped over droppable targets. In this example, we’ll be using the Draggable class to create a draggable element. We’ll also need to create a DragDropManager instance to manage the drag and drop interactions.
​
options
object
required
Configuration for the draggable element:
  • id (required): Unique identifier
  • element: The DOM element to make draggable
  • handle: Optional drag handle element
  • disabled: Whether dragging is disabled

​
Creating droppable targets

In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements. To do so, we’ll be using the Droppable class. Like the Draggable class, the Droppable class requires an element and an id as arguments.
​
options
object
required
Configuration for the droppable target:
  • id (required): Unique identifier
  • element: The DOM element to make droppable
  • accepts: Types of draggable elements to accept
  • disabled: Whether dropping is disabled
In order to move the draggable element into the droppable target, we need to monitor the drag and drop events and update the DOM accordingly.

​
Next steps

Now that you have a basic understanding of how to make elements draggable and droppable, you can explore the concepts covered in this quickstart guide in more detail:

Manager

Create drag and drop contexts for your draggable and droppable elements.

Draggable

Learn how to make elements draggable with the Draggable class.

Droppable

Learn how to create droppable targets with the Droppable class.

Sortable

Learn how to create sortable elements with the Sortable class.