Touch #

HTML5 Backend does not support touch events. So it doesn't work on tablets and mobile devices. You can use react-dnd-touch-backend for touch devices.

Install #

npm install react-dnd-touch-backend
copy success
copy

use #

<script setup lang="ts">
import { TouchBackend, TouchBackendOptions } from 'react-dnd-touch-backend'
import { DndProvider } from 'vue3-dnd'

const options: TouchBackendOptions = {

}
</script>

<template>
  <DndProvider :backend="TouchBackend" :options="options">
    <!-- your drag-and-drop application -->
  </DndProvider>
</template>
copy success
copy

##Options

| Key | Type | Default | Description | |----------------------|------------------------------------ ------------|-------------|------------- -------------------------------------------------- --------------------------| | enableTouchEvents | boolean | true | Flag indicating whether touch-based event handling is enabled. | | enableMouseEvents | boolean | false | Flag indicating whether click-based event handling is enabled.
NOTE: This is wrong due to the difference between touchstart/touchend event propagation and mousedown/mouseup/click. | | enableKeyboardEvents | boolean | false | Flag indicating whether keyboard event handling is enabled. | | delay | number | 0 | The number of milliseconds to delay processing all events. | | delayTouchStart | number | 0 | The number of milliseconds to delay processing touch events. | | delayMouseStart | number | 0 | The number of milliseconds to delay processing mouse events. | | touchSlop | number | 0 | Specifies the pixel distance to move before signaling a drag. | | ignoreContextMenu | boolean | false | If true, prevents the contextmenu event from canceling the drag. | | scrollAngleRanges | { start?: number, end?: number }[] | undefined | Specifies the range of angles (in degrees) for which drag events should be ignored. This is useful when you want to allow the user to scroll in a specific direction instead of dragging. The degrees move clockwise, with 0/360 pointing to the left. |

// allow vertical scrolling
const options = {
  scrollAngleRanges: [
    { start: 30, end: 150 },
    { start: 210, end: 330 }
  ]
}
// allow horizontal scrolling
const options = {
  scrollAngleRanges: [{ start: 300 }, { end: 60 }, { start: 120, end: 240 }]
}
copy success
copy

const hasNative =
  document && (document.elementsFromPoint || document.msElementsFromPoint)

function getDropTargetElementsAtPoint(x, y, dropTargets) {
  return dropTargets.filter((t) => {
    const rect = t.getBoundingClientRect()
    return (
      x >= rect.left && x <= rect.right && y <= rect.bottom && y >= rect.top
    )
  })
}

// use custom function only if elementsFromPoint is not supported
const backendOptions = {
  getDropTargetElementsAtPoint: !hasNative && getDropTargetElementsAtPoint
}
copy success
copy