Solid Hooks

Complete API reference for dnd-kit Solid hooks

useDraggable

Make an element draggable.

Usage

import { useDraggable } from '@dnd-kit/solid';

function DraggableCard() {
  const { draggable, isDragging, ref, handleRef } = useDraggable({
    id: 'card-1',
    data: { type: 'card' }
  });

  return (
    <div ref={ref} classList={{ dragging: isDragging() }}>
      <div ref={handleRef} class="handle">⋮⋮</div>
      <div class="content">Drag me</div>
    </div>
  );
}

Parameters

id · string | number · required

Unique identifier for the draggable element. Can be a getter for reactivity.

element · Element

Initial element to make draggable (usually set via the ref return value)

handle · Element

Initial drag handle element (usually set via the handleRef return value)

data · T

Custom data to attach to the draggable instance

disabled · boolean

Whether the draggable is disabled

alignment · Alignment

Alignment configuration for the draggable element

plugins · Plugin[]

Array of plugins to apply to this draggable

modifiers · Modifier[]

Array of modifiers to transform drag coordinates

sensors · Sensor[]

Custom sensors for this draggable instance

Returns

draggable · Draggable

The draggable instance

isDragging · Accessor<boolean>

Signal indicating whether this element is currently being dragged

isDropping · Accessor<boolean>

Signal indicating whether this element is currently dropping

isDragSource · Accessor<boolean>

Signal indicating whether this element is the source of the current drag operation

ref · (el: Element) => void

Ref setter to attach the draggable behavior to an element

handleRef · (el: Element) => void

Ref setter to attach a drag handle to an element

---

useDroppable

Make an element droppable.

Usage

import { useDroppable } from '@dnd-kit/solid';

function DropZone() {
  const { droppable, isDropTarget, ref } = useDroppable({
    id: 'zone-1',
    accept: ['card']
  });

  return (
    <div ref={ref} classList={{ 'drop-target': isDropTarget() }}>
      Drop here
    </div>
  );
}

Parameters

id · string | number · required

Unique identifier for the droppable element. Can be a getter for reactivity.

element · Element

Initial element to make droppable (usually set via the ref return value)

accept · string[]

Array of draggable types this droppable accepts

type · string

Type identifier for this droppable

disabled · boolean

Whether the droppable is disabled

data · T

Custom data to attach to the droppable instance

collisionDetector · CollisionDetector

Custom collision detection algorithm

Returns

droppable · Droppable

The droppable instance

isDropTarget · Accessor<boolean>

Signal indicating whether this element is currently a valid drop target

ref · (el: Element) => void

Ref setter to attach the droppable behavior to an element

---

useSortable

Combine draggable and droppable functionality for sortable items.

Usage

import { For } from 'solid-js';
import { useSortable } from '@dnd-kit/solid/sortable';

function SortableList() {
  const [items, setItems] = createSignal([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' }
  ]);

  return (
    <For each={items()}>
      {(item, index) => {
        const { sortable, isDragging, isDropTarget, ref } = useSortable({
          id: item.id,
          group: 'list',
          get index() { return index(); }
        });

        return (
          <div 
            ref={ref}
            classList={{
              dragging: isDragging(),
              'drop-target': isDropTarget()
            }}
          >
            {item.text}
          </div>
        );
      }}
    </For>
  );
}

Parameters

Includes all parameters from useDraggable and useDroppable, plus:

group · string | number · required

The sortable group this item belongs to. Can be a getter for reactivity.

index · number · required

The current index of this item in the sortable group. Should be a getter for reactivity.

source · Element

Optional source element for the sortable

target · Element

Optional target element for drop positioning

transition · Transition

Transition configuration for sortable animations

collisionPriority · number

Priority for collision detection when multiple droppables overlap

Returns

sortable · Sortable

The sortable instance

isDragging · Accessor<boolean>

Signal indicating whether this element is currently being dragged

isDropping · Accessor<boolean>

Signal indicating whether this element is currently dropping

isDragSource · Accessor<boolean>

Signal indicating whether this element is the source of the current drag operation

isDropTarget · Accessor<boolean>

Signal indicating whether this element is currently a valid drop target

ref · (el: Element) => void

Ref setter to attach the sortable behavior to an element

handleRef · (el: Element) => void

Ref setter to attach a drag handle

sourceRef · (el: Element) => void

Ref setter to attach a source element

targetRef · (el: Element) => void

Ref setter to attach a target element for drop positioning

---

useDragDropMonitor

Listen to drag and drop events.

Usage

import { useDragDropMonitor } from '@dnd-kit/solid';

function App() {
  useDragDropMonitor({
    onDragStart(event) {
      console.log('Drag started:', event.operation.source);
    },
    onDragMove(event) {
      console.log('Dragging:', event.operation.shape.current);
    },
    onDragEnd(event) {
      console.log('Drag ended:', event.operation);
    },
    onBeforeDragStart(event) {
      if (shouldCancel) {
        event.preventDefault();
      }
    }
  });

  return (
    <DragDropProvider>
      {/* ... */}
    </DragDropProvider>
  );
}

Parameters

onBeforeDragStart · (event: BeforeDragStartEvent) => void

Called before drag starts. Can cancel the operation.

onDragStart · (event: DragStartEvent) => void

Called when drag operation starts

onDragMove · (event: DragMoveEvent) => void

Called when the dragged element moves

onDragOver · (event: DragOverEvent) => void

Called when dragging over a droppable

onDragEnd · (event: DragEndEvent) => void

Called when drag operation ends

onDragCancel · (event: DragCancelEvent) => void

Called when drag operation is cancelled

---

useDragOperation

Access the current drag operation state.

Usage

import { useDragOperation } from '@dnd-kit/solid';
import { Show } from 'solid-js';

function DragStatus() {
  const { source, target, status } = useDragOperation();

  return (
    <>
      <Show when={source()}>
        <div>Currently dragging: {source()?.id}</div>
      </Show>
      <Show when={target()}>
        <div>Over: {target()?.id}</div>
      </Show>
      <div>
        Status: {status()?.idle ? 'idle' : 'active'}
      </div>
    </>
  );
}

Returns

source · Accessor<Draggable | null>

Signal for the source draggable element of the current operation

target · Accessor<Droppable | null>

Signal for the current drop target

status · Accessor<DragOperationStatus | undefined>

Signal for the status of the drag operation (idle, dragging, dropping)

---

useDragDropManager

Access the drag drop manager instance.

Usage

import { useDragDropManager } from '@dnd-kit/solid';

function ManagerInfo() {
  const manager = useDragDropManager();

  // Access manager properties
  const draggables = manager?.registry.draggables;
  const droppables = manager?.registry.droppables;

  return <div>Manager loaded: {manager ? 'yes' : 'no'}</div>;
}

Returns

manager · DragDropManager | undefined

The drag drop manager instance (undefined if called outside DragDropProvider)

---

useDeepSignal

Create a deep reactive proxy for signal-based objects.

Usage

import { useDeepSignal } from '@dnd-kit/solid/hooks';
import { useDragDropManager } from '@dnd-kit/solid';

function Component() {
  const manager = useDragDropManager();
  const tracked = useDeepSignal(() => manager?.dragOperation);

  // Accessing nested signal properties triggers reactivity
  const sourceId = tracked()?.source?.id;

  return <div>Source: {sourceId}</div>;
}

Parameters

target · Accessor<T> · required

An accessor that returns the target object to track (typically contains signals)

Returns

proxy · Accessor<T>

An accessor that proxies access to the target and triggers reactivity on nested signal reads