# useDragDrop API

> Auto-generated API reference for `useDragDrop` from @vuetify/v0 (Vuetify0).
> Source of truth: https://0.vuetifyjs.com/api/use-drag-drop

## Related

- https://0.vuetifyjs.com/composables/system/use-drag-drop
- https://0.vuetifyjs.com/composables/data/create-sortable
- https://0.vuetifyjs.com/composables/data/create-kanban
- https://0.vuetifyjs.com/composables/registration/create-registry
- https://0.vuetifyjs.com/composables/system/use-roving-focus

## Functions

### useDragDrop

Create a headless drag-and-drop context.

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

## Options

| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| `adapters` | `DragDropAdapter<Z>[] \| undefined` | — | no | — |
| `plugins` | `DragDropPlugin<Z>[] \| undefined` | — | no | — |
| `onBeforeStart` | `((drag: ActiveDrag<Z>) => boolean \| void) \| undefined` | — | no | — |
| `onMove` | `((drag: ActiveDrag<Z>) => void) \| undefined` | — | no | — |
| `onBeforeDrop` | `((drag: ActiveDrag<Z>, position: DropPosition) => boolean \| void) \| undefined` | — | no | — |
| `onDrop` | `((drag: ActiveDrag<Z>, position: DropPosition) => void) \| undefined` | — | no | — |
| `onCancel` | `((drag: ActiveDrag<Z>, reason: "cancel" \| "reject") => void) \| undefined` | — | no | — |

## Methods

| Name | Type | Description |
|---|---|---|
| `cancel` | `() => void` | — |

## Properties

| Name | Type | Description |
|---|---|---|
| `draggables` | `DraggablesContext<Z>` | — |
| `zones` | `ZonesContext<Z>` | — |
| `active` | `Readonly<ShallowRef<ActiveDrag<Z> \| null>>` | — |
| `isDragging` | `Readonly<Ref<boolean, boolean>>` | — |