Skip to main content

​
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

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