Draggable

Pointer-, touch-, and keyboard-friendly drag-and-drop. Make any element draggable, group items into a sortable list, or drop items into a zone — the framework fires bubbling draggable:start, draggable:drag, and draggable:end events.

Basic Draggable

Add .vd-draggable to any element to make it draggable.

Drag me around

And me too

<div class="vd-draggable" data-draggable="item-1">
  <span class="vd-draggable-handle"><i class="ph ph-dots-six-vertical"></i></span>
  Drag me around
</div>

With Handle

Use .vd-draggable-handle so only the handle starts a drag — the rest of the element stays selectable.

Photo block

Text block

Sortable Container

Wrap items in .vd-draggable-container.vd-draggable-container-vertical to reorder them by dragging.

First item

Second item

Third item

Fourth item

<div class="vd-draggable-container vd-draggable-container-vertical">
  <div class="vd-draggable-item" data-draggable="sort-1">
    <span class="vd-draggable-handle"><i class="ph ph-dots-six-vertical"></i></span>
    First item
  </div>
  <div class="vd-draggable-item" data-draggable="sort-2">…</div>
  <div class="vd-draggable-item" data-draggable="sort-3">…</div>
</div>

Drop Zone

Drag the item below into the .vd-drop-zone. Empty zones show a placeholder and highlight while you drag over them.

Drag me into the zone

<div class="vd-draggable" data-draggable="drop-item-1">
  <span class="vd-draggable-handle">☰</span> Drag into the zone
</div>

<div class="vd-drop-zone" aria-label="Drop items here"></div>

Disabled State

Add .is-disabled to lock an item in place.

Draggable

Disabled (can't move)

Engine wiring

import { ref } from 'vue';
import { useDraggable } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useDraggable(root);   // wires .vd-draggable / containers / drop-zones inside root

API Reference

Classes & Attributes

Class / Attribute	Description
`.vd-draggable`	Makes an element draggable (pointer + touch + keyboard).
`data-draggable="id"`	Stable id carried on the draggable lifecycle events.
`.vd-draggable-handle`	Optional grab handle — only the handle starts a drag.
`.vd-draggable-container`	Wraps items into a sortable group.
`.vd-draggable-container-vertical`	Stacks the sortable items vertically.
`.vd-draggable-item`	A reorderable child inside a container.
`.vd-drop-zone`	A target area. Shows a placeholder while empty; highlights on drag-over.
`.is-disabled`	Prevents dragging the element.

Events

Event	Description
`draggable:start`	Fired on the element when a drag begins.
`draggable:drag`	Fired continuously while dragging.
`draggable:end`	Fired when the drag ends (after any reorder/drop).

Accessibility

Containers receive a aria-label and items are keyboard-reorderable — focus an item and use the arrow keys.
Handles keep the rest of the item text selectable for users who don't drag.
.is-disabled items are skipped by both pointer and keyboard interaction.
Drag uses pointer/touch events (not legacy HTML5 DnD) for consistent behaviour across devices.