Note

This documentation describes the v-neos-dragdrop Vue directive for native UI views. For Xml templates see dragdrop

v-neos-dragdrop

Enables drag-and-drop interactions on any element. The directive is split into multiple argument-based bindings that each handle a different phase of the drag lifecycle.

Import

import { NeosDragdrop } from '@neos/app'

Registration:

// in your app setup
app.directive('neos-dragdrop', NeosDragdrop)

Syntax

<div v-neos-dragdrop:[arg]="value" />

Arguments & Values

Argument	Value type	Description
draggable	boolean	Makes the element draggable
data	unknown	Data payload attached to the drag operation
dragstart	(args: DragStartEventArgs) => void	Called when the drag starts
dragover	(args: DragEventArgs) => boolean	Called on every drag-over. Return true to allow drop
dragenter	(args: DragEventArgs) => void	Called when a dragged element enters this target
dragleave	(args: DragEventArgs) => void	Called when a dragged element leaves this target
dragend	(args: DragEventArgs) => void	Called when the drag operation ends (on the source)
drop	(args: DropEventArgs) => void	Called when an element is dropped on this target

Types

import type {
  DragEventArgs,
  DragStartEventArgs,
  DropEventArgs,
  TreeViewDragEventArgs
} from '@neos/app'

interface DragStartEventArgs {
  nativeEvent: DragEvent
  sourceElement: HTMLElement
}

interface DropEventArgs {
  nativeEvent: DragEvent
  sourceData: unknown
  targetElement: HTMLElement
}

Usage Examples

Draggable card

<Card
  v-neos-dragdrop:draggable="true"
  v-neos-dragdrop:data="item"
  v-neos-dragdrop:dragstart="onDragStart"
>
  {{ item.name }}
</Card>

Drop target

<div v-neos-dragdrop:dragover="canDrop" v-neos-dragdrop:drop="onDrop" class="drop-zone">
  Drop here
</div>

function canDrop({ sourceData }) {
  return sourceData.type === 'task'
}

function onDrop({ sourceData, targetElement }) {
  moveItem(sourceData, targetElement.dataset.id)
}

Combined draggable + droppable (tree reorder)

<div
  v-for="item in items"
  :key="item.id"
  v-neos-dragdrop:draggable="true"
  v-neos-dragdrop:data="item"
  v-neos-dragdrop:dragover="() => true"
  v-neos-dragdrop:drop="onDrop"
>
  {{ item.label }}
</div>