useDraggable Hook - Solid

Usage

The useDraggable hook requires a unique id and returns a ref callback and reactive getters for drag state.

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

function Draggable() {
  const {ref, isDragging} = useDraggable({id: 'my-draggable'});

  return (
    <button ref={ref} data-dragging={isDragging()}>
      Drag me
    </button>
  );
}

Input

UniqueIdentifier

required

A unique identifier for this draggable instance. Use getter syntax (get id() { return props.id }) for reactive values.

handle

Element

A handle element. When set, only this element activates dragging. Use the handleRef callback to set it.

disabled

boolean

Whether the draggable is disabled.

plugins

PluginDescriptor[]

An array of plugin descriptors for per-entity plugin configuration. Use Plugin.configure() to create descriptors. For example, Feedback.configure({ feedback: 'clone' }).

modifiers

Modifier[]

Modifiers to apply to this draggable instance.

sensors

Sensor[]

Sensors to use for this draggable instance.

data

Data

Custom data to attach to this draggable instance.

Output

A callback ref to attach to the draggable element.

A callback ref to attach to a drag handle element.

Whether this element is currently being dragged. Call as isDragging() in JSX.

Whether this element is in the process of being dropped. Call as isDropping() in JSX.

Whether this element is the source of the current drag operation. Call as isDragSource() in JSX.

The underlying Draggable instance.

Guides

Rendering a drag overlay

You can render a completely different element while the draggable element is being dragged by using the <DragOverlay> component.

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

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

  return (
    <>
      <button ref={ref}>Draggable</button>
      <DragOverlay>
        <div>I will be rendered while dragging...</div>
      </DragOverlay>
    </>
  );
}

The <DragOverlay> component will only render its children when a drag operation is in progress. This can be useful for rendering a completely different element while the draggable element is being dragged.

You should only render the <DragOverlay> component once per DragDropProvider component.

To render different content depending on which element is being dragged, pass a function as a child that receives the drag source:

import {DragDropProvider, DragOverlay} from '@dnd-kit/solid';

function App() {
  return (
    <DragDropProvider>
      <Draggable id="foo" />
      <Draggable id="bar" />
      <DragOverlay>
        {source => (
          <div>Dragging {source.id}</div>
        )}
      </DragOverlay>
    </DragDropProvider>
  );
}