vuedraggable 两组拖拽取消事件

好的，您的问题是如何在使用 Vue.js 中的 vuedraggable 组件中实现两组可拖拽元素的取消事件？

首先，需要给每个可拖拽元素添加一个事件监听器，以便在拖拽开始时执行相应的操作。在 vuedraggable 组件中，我们可以使用 `@start` 属性来实现这个功能。

例如，我们可以在 `@start` 事件中设置一个全局变量来存储当前正在拖拽的元素，如下所示：

<template>
  <draggable v-model="list1" @start="handleDragStart">
    <div v-for="item in list1" :key="item.id">{{ item.text }}</div>
  </draggable>
  <draggable v-model="list2" @start="handleDragStart">
    <div v-for="item in list2" :key="item.id">{{ item.text }}</div>
  </draggable>
</template>

<script>
export default {
  data() {
    return {
      list1: [],
      list2: [],
      currentDraggingElement: null
    };
  },
  methods: {
    handleDragStart(event) {
      this.currentDraggingElement = event.item;
      // 设置其他属性
    }
  }
};
</script>

接下来，我们可以为每个可拖拽元素添加一个 `@end` 事件监听器，以便在拖拽结束时执行相应的操作。在 vuedraggable 组件中，我们可以使用 `@end` 属性来实现这个功能。

<template>
  <draggable v-model="list1" @start="handleDragStart" @end="handleDragEnd">
    <div v-for="item in list1" :key="item.id">{{ item.text }}</div>
  </draggable>
  <draggable v-model="list2" @start="handleDragStart" @end="handleDragEnd">
    <div v-for="item in list2" :key="item.id">{{ item.text }}</div>
  </draggable>
</template>

<script>
export default {
  data() {
    return {
      list1: [],
      list2: [],
      currentDraggingElement: null
    };
  },
  methods: {
    handleDragStart(event) {
      this.currentDraggingElement = event.item;
      // 设置其他属性
    },
    handleDragEnd(event) {
      this.currentDraggingElement = null;
      // 执行其他操作
    }
  }
};
</script>

如果您想要取消某个元素的拖拽事件，可以在 `@start` 事件监听器中添加一个条件语句，来判断是否需要取消拖拽。例如，如果您希望在某些情况下禁止拖拽，可以添加一个类似于以下的代码：

<template>
  <draggable v-model="list1" @start="handleDragStart" @end="handleDragEnd">
    <div v-for="item in list1" :key="item.id">{{ item.text }}</div>
  </draggable>
  <draggable v-model="list2" @start="handleDragStart" @end="handleDragEnd">
    <div v-for="item in list2" :key="item.id">{{ item.text }}</div>
  </draggable>
</template>

<script>
export default {
  data() {
    return {
      list1: [],
      list2: [],
      currentDraggingElement: null
    };
  },
  methods: {
    handleDragStart(event) {
      if (someCondition) {
        event.preventDefault();
        return;
      }
      this.currentDraggingElement = event.item;
      // 设置其他属性
    },
    handleDragEnd(event) {
      this.currentDraggingElement = null;
      // 执行其他操作
    }
  }
};
</script>

这样，当 `someCondition` 条件为真时，拖拽将被禁用。

希望这些代码可以帮助您在 vuedraggable 组件中实现您的需求。