​
Usage

First, create a DragDropManager instance to orchestrate the drag and drop system. Then use the Draggable class to make elements draggable:

​
Handles

By default, the entire element can be used to initiate dragging. You can restrict dragging to a specific handle element:

const element = document.createElement('div');
const handle = document.createElement('div');
handle.classList.add('handle');
handle.innerHTML = '⋮'; // Three dots menu icon for drag handle

element.appendChild(handle);

const draggable = new Draggable({
  id: 'draggable-1',
  element,
  handle, // Only allow dragging from the handle
}, manager);

​
Types

You can assign types to draggable elements to restrict which droppable targets they can be dropped on:

// Assign a type
const draggable = new Draggable({
  id: 'draggable-1',
  element,
  type: 'item', // Only droppables accepting 'item' type will be valid targets
}, manager);

​
Feedback

You can customize how the element behaves while being dragged using the feedback option:

const draggable = new Draggable({
  id: 'draggable-1',
  element,
  feedback: 'clone', // Create a clone while dragging
}, manager);

Available feedback options:

  • 'default': The original element moves with the drag (best for most cases)
  • 'clone': A copy of the element stays in place while the original moves (good for drag-to-copy)
  • 'move': The element moves without a placeholder (minimal visual feedback)
  • 'none': No visual feedback (useful for custom drag overlays)

​
API Reference

​
Arguments

The Draggable class accepts the following arguments:

​
id
string | number
required

A unique identifier for this draggable element within the same drag and drop context provider.

​
element
Element

The DOM element to make draggable. While not required in the constructor, it must be set to enable dragging.

​
handle
Element

Optionally specify a drag handle element. If not provided, the entire element will be draggable. See drag handles.

​
type
string | number | Symbol

Optionally assign a type to restrict which droppable targets can accept this element. See types.

​
feedback
'default' | 'clone' | 'move' | 'none'

Specify how the element should behave while being dragged. See feedback.

​
disabled
boolean

Set to true to temporarily prevent dragging this element.

​
modifiers
Modifier[]

An array of modifiers to customize drag behavior.

​
sensors
Sensors[]

An array of sensors to detect drag interactions.

​
data
{[key: string]: any}

Optional data to associate with this draggable element, available in event handlers.

​
effects
() => Effect[]

This is an advanced feature and should not need to be used by most consumers.
You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the destroy() method of this instance.

​
Properties

The Draggable instance provides these key properties:

  • id: The unique identifier
  • element: The main DOM element
  • handle: The drag handle element (if specified)
  • type: The assigned type
  • disabled: Whether dragging is disabled
  • isDragging: Whether this element is currently being dragged
  • isDropping: Whether this element is being dropped

​
Methods

  • register(): Register this draggable with the manager
  • unregister(): Remove this draggable from the manager
  • destroy(): Clean up this draggable instance and remove all listeners

​
Usage

First, create a DragDropManager instance to orchestrate the drag and drop system. Then use the Draggable class to make elements draggable:

​
Handles

By default, the entire element can be used to initiate dragging. You can restrict dragging to a specific handle element:

const element = document.createElement('div');
const handle = document.createElement('div');
handle.classList.add('handle');
handle.innerHTML = '⋮'; // Three dots menu icon for drag handle

element.appendChild(handle);

const draggable = new Draggable({
  id: 'draggable-1',
  element,
  handle, // Only allow dragging from the handle
}, manager);

​
Types

You can assign types to draggable elements to restrict which droppable targets they can be dropped on:

// Assign a type
const draggable = new Draggable({
  id: 'draggable-1',
  element,
  type: 'item', // Only droppables accepting 'item' type will be valid targets
}, manager);

​
Feedback

You can customize how the element behaves while being dragged using the feedback option:

const draggable = new Draggable({
  id: 'draggable-1',
  element,
  feedback: 'clone', // Create a clone while dragging
}, manager);

Available feedback options:

  • 'default': The original element moves with the drag (best for most cases)
  • 'clone': A copy of the element stays in place while the original moves (good for drag-to-copy)
  • 'move': The element moves without a placeholder (minimal visual feedback)
  • 'none': No visual feedback (useful for custom drag overlays)

​
API Reference

​
Arguments

The Draggable class accepts the following arguments:

​
id
string | number
required

A unique identifier for this draggable element within the same drag and drop context provider.

​
element
Element

The DOM element to make draggable. While not required in the constructor, it must be set to enable dragging.

​
handle
Element

Optionally specify a drag handle element. If not provided, the entire element will be draggable. See drag handles.

​
type
string | number | Symbol

Optionally assign a type to restrict which droppable targets can accept this element. See types.

​
feedback
'default' | 'clone' | 'move' | 'none'

Specify how the element should behave while being dragged. See feedback.

​
disabled
boolean

Set to true to temporarily prevent dragging this element.

​
modifiers
Modifier[]

An array of modifiers to customize drag behavior.

​
sensors
Sensors[]

An array of sensors to detect drag interactions.

​
data
{[key: string]: any}

Optional data to associate with this draggable element, available in event handlers.

​
effects
() => Effect[]

This is an advanced feature and should not need to be used by most consumers.
You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the destroy() method of this instance.

​
Properties

The Draggable instance provides these key properties:

  • id: The unique identifier
  • element: The main DOM element
  • handle: The drag handle element (if specified)
  • type: The assigned type
  • disabled: Whether dragging is disabled
  • isDragging: Whether this element is currently being dragged
  • isDropping: Whether this element is being dropped

​
Methods

  • register(): Register this draggable with the manager
  • unregister(): Remove this draggable from the manager
  • destroy(): Clean up this draggable instance and remove all listeners