vue.js - Vue Draggable 带触摸 - 放置不会触发

Question

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

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

拖放区(它包括一个包含可拖动对象和大量 if 语句的组件):

<div class="col-md-4 border" @dragover.prevent @drop="approved()">
  <Wachtrij class="fullHeight" :data2="opdrachtenData2"></Wachtrij>
</div>

方法:

export default {
 methods: {
  ...
  approved() {
   console.log("Function approved() is being executed.")
   if (this.draggingOrder.status === 5) {
    this.popupGekeurd = true;
   }
   else if (this.draggingOrder.status === 6) {
    this.popupTochGoed = true;
   }
   else if ([40, 52, 42,41,49,55,54].indexOf(this.draggingOrder.status) !== -1) {
    this.back = true;
   }
  },
  ...
 }
}

Answer 1

问题似乎是您正在使用 native 事件，而触摸实现并不(总是？)使用这些事件。您应该使用 one of the events outlined in the documentation 的 draggable 组件。 。在您的情况下，start 和 end 事件看起来很有希望。此事件有几个属性 ( docs )，其中一些是 to 和 from。

假设我们有以下代码:

<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>

这会创建几个区域，每个区域都填充有自己的元素。 zones 的每个数组项都会根据您移动每个项的位置而更改。然后，您可以使用 start 获取有关何时开始移动项目的信息，使用 end 获取有关何时停止移动项目以及该项目来自何处的信息，以及它最终在哪里。以下方法展示了在这种情况下您可以使用它做什么:

  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!');
      }
    }
  }

在本例中，我们使用类 zone-0、zone-1 或 zone-2 来创建 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上找到。