Quickstart

​

Installation

Before getting started, make sure you install @dnd-kit/dom in your project.

​

Creating a draggable element

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. The Draggable class requires an element and an id as arguments. We’ll also need to create a DragDropManager instance to manage the drag and drop interactions.

import {DragDropManager, Draggable} from '@dnd-kit/dom';

const manager = new DragDropManager();
const element = document.createElement('button');
const draggable = new Draggable({
  element,
  id: 'draggable',
}, manager);

document.body.appendChild(element);

​

Creating droppable elements

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 useDroppable hook.

Like the useDraggable hook, the useDroppable hook requires a unique id, and returns a ref that you can attach to any element to make it droppable.

This time, we’ll accept the id argument as a prop of the Droppable component.

import {Droppable} from '@dnd-kit/dom';

const element = document.createElement('div');
const droppable = new Droppable({
  element,
  id: 'droppable',
}, manager);

element.setAttribute('style', 'width: 300px; height: 300px; background: #FEFEFE;');

document.body.appendChild(element);

​

Putting all the pieces together

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.

manager.monitor.addEventListener('dragend', (event) => {
  if (event.canceled) {
    return;
  }

  if (event.operation.target?.id === 'droppable') {
    droppableElement.appendChild(draggableElement);
  } else {
    document.body.prependChild(draggableElement);
  }
});

​

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: