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

​
Overview

The @dnd-kit/solid package provides a set of SolidJS hooks and components that you can use to build drag and drop interfaces. It is a thin SolidJS integration layer built on top of the vanilla library, so all of the same concepts are shared and can be used. You can refer to the vanilla documentation of these concepts, such as plugins, modifiers, and sensors.
@dnd-kit/solid requires SolidJS 1.8 or later.

​
Installation

Before getting started, make sure you install @dnd-kit/solid in your project: 
npm install @dnd-kit/solid

​
Making elements draggable

Let’s get started by creating draggable elements. The useDraggable hook requires a unique id, and returns a ref callback that you can attach to any element. 
import {useDraggable} from '@dnd-kit/solid';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});

  return (
    <button ref={ref}>
      Draggable
    </button>
  );
}

​
Creating droppable elements

To create drop targets, use the useDroppable hook. 
import {useDroppable} from '@dnd-kit/solid';

function Droppable(props) {
  const {ref, isDropTarget} = useDroppable({id: props.id});

  return (
    <div ref={ref} style={{width: '300px', height: '300px'}}>
      {props.children}
    </div>
  );
}

​
Putting all the pieces together

Wrap your draggable and droppable elements in a DragDropProvider to enable drag and drop interactions. 
import {createSignal} from 'solid-js';
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/solid';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});
  return <button ref={ref}>Draggable</button>;
}

function Droppable(props) {
  const {ref, isDropTarget} = useDroppable({id: 'droppable'});
  return <div ref={ref}>{props.children}</div>;
}

function App() {
  const [parent, setParent] = createSignal(undefined);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id);
      }}
    >
      {parent() == null ? <Draggable /> : null}

      <Droppable id="droppable">
        {parent() === 'droppable' ? <Draggable /> : null}
      </Droppable>
    </DragDropProvider>
  );
}
When passing reactive props to hooks like useSortable, use getter syntax to maintain Solid’s fine-grained reactivity:
useSortable({
  get id() { return props.id; },
  get index() { return props.index; },
});

​
Next steps

DragDropProvider

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

useDraggable

Learn how to make elements draggable with the useDraggable hook.

useDroppable

Learn how to create droppable targets with the useDroppable hook.

useSortable

Learn how to create sortable elements with the useSortable hook.