Question

我一直在一个必须同时在台式机和平板电脑上运行的网站上工作。网站的一部分包含三列，并且能够在各列之间拖动订单。有时候，用户不得不回答一些问题或更改特定顺序的某些数据。这种情况发生在由@drop函数触发的弹出窗口中（例如@ drop =“ 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

问题似乎是您正在使用本机事件，而touch实现不（总是？）使用这些事件。打算将draggable组件与one of the events outlined in the documentation一起使用。就您而言，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来设置拖放区，因此我们可以使用类名来确定最终进入的拖放区。

确定更改哪个区域的另一种方法是只使用观察程序。由于zones根据您移动项目的位置而变化，因此您可以简单地观察特定的放置区以进行更改，并根据此操作。

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

可以在codeandbox上找到完整的示例。

Vue可拖动并带触摸-放下不会触发

1 个答案: