Quickstart

import Intro from '/snippets/quickstart/intro.mdx'; import {Story} from '/snippets/story.mdx';

import {CodeSandbox} from '/snippets/sandbox.mdx'; import {draggableStyles, droppableStyles} from '/snippets/code.mdx';

Installation

Install @dnd-kit/dom in your project:

yarn add @dnd-kit/dom

pnpm add @dnd-kit/dom

bun add @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.

export const draggableCode = ` function createDraggable(manager) { // Create a DOM element (or use an existing one) const element = document.createElement('button'); element.innerText = 'draggable'; element.classList.add('btn');

// Make the element draggable return new Draggable({id: 'draggable-button', element}, manager); } `.trim();

export const draggableExample = ` import {Draggable, DragDropManager} from '@dnd-kit/dom';

${draggableCode}

export default function App() { // Create a manager to coordinate drag and drop const manager = new DragDropManager();

// Create a draggable element const draggable = createDraggable(manager);

// Add the draggable element to the DOM document.body.append(draggable.element); } `.trim();

<CodeSandbox files={{ 'index.js': {code: import './styles.css';\nimport App from './app.js';\n\nApp();, hidden: true}, 'app.js': {code: draggableExample, active: true}, 'styles.css': {code: draggableStyles, hidden: true}, }} height={475} previewHeight={200} template="vanilla" />

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.

export const droppableCode = ` import {Droppable, DragDropManager} from '@dnd-kit/dom';

export function createDroppable(manager) { const element = document.createElement('div'); element.classList.add('droppable');

const droppable = new Droppable({ element, id: 'droppable-container', // Required - must be unique effects(){ return [ () => droppable.isDropTarget ? element.classList.add('active') : element.classList.remove('active') ]; } }, manager);

return droppable; } `.trim();

export const appCode = ` import {DragDropManager} from '@dnd-kit/dom';

import {createDraggable} from './Draggable.js'; import {createDroppable} from './Droppable.js';

export default function App() { const manager = new DragDropManager(); const app = document.getElementById('app');

const draggable = createDraggable(manager); const droppable = createDroppable(manager);

app.append(draggable.element, droppable.element); } `.trim();

<CodeSandbox files={{ 'index.js': {code: import './styles.css';\nimport App from './App.js';\n\nApp();, hidden: true}, 'App.js': {code: appCode}, 'Droppable.js': {code: droppableCode, active: true}, 'Draggable.js': {code: import {Draggable} from '@dnd-kit/dom';\n\nexport ${draggableCode}}, 'styles.css': {code: ${draggableStyles}\n${droppableStyles}, hidden: true}, }} height={480} previewHeight={420} template="vanilla" showTabs />

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.

export const finalAppCode = ` import {DragDropManager} from '@dnd-kit/dom';

import {createDraggable} from './Draggable.js'; import {createDroppable} from './Droppable.js';

export default function App() { const manager = new DragDropManager(); const app = document.getElementById('app');

const draggable = createDraggable(manager); const droppable = createDroppable(manager);

manager.monitor.addEventListener('dragend', (event) => { const {operation, canceled} = event; const {source, target} = operation;

// Skip if drag operation was canceled (e.g. if escape key was pressed)
if (canceled) return;

// Move element to drop target if dropped on droppable
if (target && target.id === droppable.id) {
  droppable.element.append(source.element);
} else {
  app.prepend(source.element);
}

});

app.append(draggable.element, droppable.element); } `.trim();

<CodeSandbox files={{ 'index.js': {code: import './styles.css';\nimport App from './App.js';\n\nApp();, hidden: true}, 'App.js': {code: finalAppCode, active: true}, 'Droppable.js': {code: droppableCode}, 'Draggable.js': {code: import {Draggable} from '@dnd-kit/dom';\n\nexport ${draggableCode}}, 'styles.css': {code: ${draggableStyles}\n${droppableStyles}, hidden: true}, }} height={660} previewHeight={420} template="vanilla" showTabs />

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: