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

ref

(element: Element) => void

A callback ref to attach to the draggable element.

handleRef

(element: Element) => void

A callback ref to attach to a drag handle element.

isDragging

() => boolean

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

isDropping

() => boolean

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

isDragSource

() => boolean

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

draggable

Draggable

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>
  );
}