Vue3；如何让拖放在移动设备上正常工作？

Question

我用 Vue3 设计了几个网站，它们使用 n x n 网格中的元素。它们在桌面浏览器上都能完美运行，但在移动设备上却很糟糕：

Chrome：差不多可以用，但需要触摸并按住图像一两秒（直到出现微小的“点击”反馈）才能拖动。

Firefox：根本不拖动

Safari： 可以拖动，但掉落时会崩溃。

元素定义如下：

      <v-img class="canDragIt"
       :draggable="true"
       @dragstart="drag($event,idString(cell.id,r,c))"
       @drop="drop($event,r,c)"
       @dragover="allowDrop($event,r,c)"
       @dblclick = "addNoTrack(r,c)"
       :src = cell.content
     >

我已经编写了所有事件处理程序以允许交换图像，并防止某些图像被拖动（或放置在某些位置）。正如我所说，这一切在桌面浏览器上运行良好。 有几个用于在 Vue 等上进行拖放的第三方库，例如 vue.draggable.next 和 sortable-js-vue3，但它们基于

sortablejs

并对拖动的项目重新排序继续，这是我不想要的效果，并且会导致额外的并发症。有些有“交换”插件，但很难使用；对某些库的支持相当最新；其他人则很不支持或根本不支持。

我也尝试过 DragDropTouch 但这要么与 Vue/Vuetify 不兼容，要么尚未使用最新的浏览器进行测试（它已有 7 年历史）。

我尝试过简单的

mousedown

等：

:draggable="true"
@mousedown="startDrag($event,r,c)"
@mousemove="mouseDrag($event,r,c)"
@touchstart="startDrag($event,r,c)"
@touchend="touchDrag($event,r,c)"

这在移动设备和桌面上运行良好，但拖动光标始终是“noentry”（不允许放置），并且我未能找到克服此问题的方法（我已经尝试过

event.dataTransfer.effectAllowed

等，

event.target.style.cursor='move'

和

Element.setPointerCapture()

但似乎都不适用于 Vue）

我也尝试过 vue-3-touch-events 但触发的事件没有

dataTransfer

属性，所以我无法使用现有的代码进行事件处理。

那么，有没有一种经过验证的方法可以在移动设备上使用 vue 和可拖动元素而不使用 sortablejs？如果我能解决那个烦人的光标，我很乐意使用简单的

mousedown

/

touchstart

方法！

Answer 1

我有一个使用 nuxt3 的类似案例。我解决了如下

• 将

  dragdroptouch.j

  添加到资产文件夹

• 在我的“app.vue”中我添加了

  if (process.client) import("@/assets/script/dragdroptouch.js")

希望它对你有用