Vue.js Vue可拖动，具有触摸式拖放功能'；t触发器

我一直在开发一个既能在台式机上运行又能在平板电脑上运行的网站。该网站的一部分有三个栏目，可以将订单从一个栏目拖到另一个栏目。有时，在drop中，用户必须回答一些问题或更改特定顺序的某些数据。这发生在由@drop函数触发的弹出窗口中（例如@drop=“approved（）”。然后，approved（）方法检查已删除订单的状态并显示弹出窗口）

当我在桌面上时，一切正常。但当我在开发者工具中切换到iPad Pro时，什么也没发生。我实现了Vue Dragable，它表示可以使用触摸设备。在他们的例子中，我找不到任何关于触摸事件或为触摸添加新手柄的信息，所以我不知道现在该怎么办。 拖动在触摸设备上工作正常，只是@drop函数不会触发

dropzone（它包括一个包含DragTables和许多if语句的组件）：

---

问题似乎是您使用的是本机事件，而touch实现并不（总是？）使用这些事件。您可以将

可拖动组件与一起使用。在您的案例中，
start
和
end
事件看起来很有希望。此事件有几个属性（），其中一些属性是
到
和
自

假设我们有以下代码：

<draggable v-for="(zone, index) in zones" v-model="zones[index]" :class="['dropzone', `zone-${index}`]" :key="`dropzone-${index}`" :options="options" @start="start" @end="end">
  <div v-for="item in zones[index]" class="dropitem" :key="`dropitem-${item.id}`">
    {{ item.title }}
  </div>
</draggable>

在本例中，我们使用类
zone-0
、
zone-1
或
zone-2
创建dropzone，因此我们可以使用类名来确定最终进入哪个dropzone


确定更改了哪个区域的另一种方法是使用观察者。由于
zones
会根据您移动项目的位置进行更改，因此您只需查看特定的dropzone以查看更改并根据更改进行操作

  watch: {
    'zones.1': {
      handler (oldZone, newZone) {
        if (Array.isArray(oldZone) && Array.isArray(newZone) && oldZone.length !== newZone.length) {
          console.log('Zone 1 was changed from', oldZone, 'to', newZone);
        }
      }
    }
  }

可以在codesandbox上找到完整的示例

谢谢，我添加了代码。这很奇怪。您是否尝试过用实际的触摸设备测试它，看看是否也出现了问题？这可能只是一个devtool bug。否则，它可能是一个问题，因为它没有检测到div作为一个有效的下降目标，但我不确定为什么它只会是一个触摸设备的问题。我希望你的dragover事件不会因为触摸而被阻止。您可以检查可拖动元素上的
dragend
事件上的
target
属性，查看其认为拖动结束的位置。触摸设备不工作。我也尝试过在Firefox中测试，但没有成功<
@dragend
上的code>target

、

from

和

to

是我当前正在拖动的div，而不是dropzone。我不知所措：（-更新：Safari似乎是@drop可以与触摸设备一起工作的唯一浏览器。Whyyyyy？？？？？！？！？！？！？！？！？！？！！您好！感谢您的回答。

开始

和

结束

事件的

到

和

从

始终是相同的：我当前拖放的元素的id，但从来不是预期的id。）dropzone。不过，您的代码是有效的。我正在尝试移动DragTable，看看这是否会改变

事件的某些内容。我最终通过删除包含DragTables的组件（我问题代码中的“Wachtrij”）使其起作用。直接将拖拽功能放在容器中，一切正常。谢谢！我也有同样的问题。我找到了这个线程，但我没有找到答案，演示也不起作用。你能告诉我你最后实现的解决方案是什么吗？
<draggable v-for="(zone, index) in zones" v-model="zones[index]" :class="['dropzone', `zone-${index}`]" :key="`dropzone-${index}`" :options="options" @start="start" @end="end">
  <div v-for="item in zones[index]" class="dropitem" :key="`dropitem-${item.id}`">
    {{ item.title }}
  </div>
</draggable>

  methods: {
    start (event) {
      console.log('start', event);
    },

    end (event) {
      console.log('end', event);

      const { from, to } = event;
      if (to.className.match(/\bzone-2\b/)) {
        console.log('Zone 2 has something added!')
      }
      if (from.className.match(/\bzone-0\b/)) {
        console.log('Zone 0 had something removed!');
      }
    }
  }

  watch: {
    'zones.1': {
      handler (oldZone, newZone) {
        if (Array.isArray(oldZone) && Array.isArray(newZone) && oldZone.length !== newZone.length) {
          console.log('Zone 1 was changed from', oldZone, 'to', newZone);
        }
      }
    }
  }