Quickstart

​

Installation

Install @dnd-kit/dom in your project:

​

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.

​

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.

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: