Solid Quickstart

You will learn

How to make elements draggable
How to set up droppable targets
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:

npmyarnpnpmbun

npm install @dnd-kit/solid

yarn add @dnd-kit/solid

pnpm add @dnd-kit/solid

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