Skip to main content

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us