Skip to main content
Vuetify0 is now in alpha!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

useDragDrop API

API reference for the useDragDrop composable.

Explore these related pages for additional context and usage patterns.

PageCategory
useDragDropSystem
createRegistryRegistration
createContextFoundation
useRovingFocusSystem

Functions

useDragDrop

(options?: DragDropOptions<Z>) => DragDropContext<Z>

Create a headless drag-and-drop context.

Options

adapters

DragDropAdapter<Z>[] | undefined

plugins

DragDropPlugin<Z>[] | undefined

onBeforeStart

((drag: ActiveDrag<Z>) => boolean | void) | undefined

onMove

((drag: ActiveDrag<Z>) => void) | undefined

onBeforeDrop

((drag: ActiveDrag<Z>, position: DropPosition) => boolean | void) | undefined

onDrop

((drag: ActiveDrag<Z>, position: DropPosition) => void) | undefined

onCancel

((drag: ActiveDrag<Z>, reason: "cancel" | "reject") => void) | undefined

Properties

draggables

DraggablesContext<Z>

zones

ZonesContext<Z>

active

Readonly<ShallowRef<ActiveDrag<Z> | null>>

isDragging

Readonly<Ref<boolean, boolean>>

Methods

cancel

() => void
Was this page helpful?

Ctrl+/