Note

This documentation describes drag and drop in native UI views. For Xml templates see dragdrop.

dragdropHandlers

dragdropHandlers gives the native drag and drop events of an element the same handlers and arguments as the dragdrop: directives of an Xml template. It is available in every template without import, and exported by @neos/app for use in a script.

Syntax

Make the element draggable with the native draggable attribute (draggable="true", or :draggable="canDrag ? 'true' : 'false'" for a bound value), then call dragdropHandlers from Vue's own listeners:

<div
  draggable="true"
  @dragstart="dragdropHandlers.dragstart($event, onDragStart, item)"
  @dragover="dragdropHandlers.dragover($event, canDrop)"
  @drop="dragdropHandlers.drop($event, onDrop)"
/>

Listener	Handler type	Behavior
dragdropHandlers.dragstart($event, handler?, data?)	(args: DragStartEventArgs) => void	Attaches data to the drag, then calls the handler. A string is the text of the drag, any other value an object of the page
dragdropHandlers.dragover($event, handler)	(args: DragEventArgs) => boolean	Called on every drag-over. Return true to accept the drop on the element
dragdropHandlers.dragenter($event, handler?)	(args: DragEventArgs) => void	Called when the drag enters the element, not when it enters one of its children
dragdropHandlers.dragleave($event, handler?)	(args: DragEventArgs) => void	Called when the drag leaves the element, not when it leaves one of its children
dragdropHandlers.dragend($event, handler)	(args: DragEventArgs) => void	Called on the dragged element when the drag ends
dragdropHandlers.drop($event, handler)	(args: DropEventArgs) => void	Called when the drag is dropped on the element, instead of the default action of the browser

A handler that is not a function is ignored. An element that listens to dragenter or dragleave listens to both, without handler for the one it does not need (@dragenter="dragdropHandlers.dragenter($event)"): the two listeners count the entries into the children of the element. The handler types are exported by @neos/app as DragStartHandler, DragOverHandler, DragHandler and DropHandler.

Arguments

Type	Methods
DragStartEventArgs	setStringData(data: string), setInternalObjectData(data: unknown): attach the data of the drag in the handler instead of in the data argument
DragEventArgs	getStringData(), getInternalObjectData(): read the data of the drag. getDatagridDragData(): the rows dragged from a datagrid, if any. hasFiles(): whether files from the computer are dragged
DropEventArgs	The methods of DragEventArgs, and getFiles(): the dropped files, as FileReference objects

A string can be dropped in another browser tab or in another application, an object only in the current tab.

Example

<script setup lang="ts">
import type { DragEventArgs, DropEventArgs } from '@neos/app'

const props = defineProps<{ items: { id: number; label: string }[] }>()

function canDrop(args: DragEventArgs): boolean {
  return args.hasFiles() || args.getInternalObjectData() !== undefined
}

function onDrop(args: DropEventArgs): void {
  if (args.hasFiles()) {
    console.log(args.getFiles())
  } else {
    console.log('Moved', args.getInternalObjectData())
  }
}
</script>

<template>
  <div
    v-for="item in props.items"
    :key="item.id"
    draggable="true"
    @dragstart="dragdropHandlers.dragstart($event, undefined, item)"
    @dragover="dragdropHandlers.dragover($event, canDrop)"
    @drop="dragdropHandlers.drop($event, onDrop)"
  >
    {{ item.label }}
  </div>
</template>