vue draggable 2个数组相互拖拽 拖拽快的话 会出现重复的

在Vue Draggable中，可以通过设置两个数组互相拖拽实现元素的交换。然而，如果拖拽速度较快，可能会出现重复的情况。

这是因为拖拽快速时，鼠标释放的事件可能无法及时触发，从而导致元素仍然保持在原来的位置。当拖拽结束后，原来的元素将被复制到新的位置，就产生了重复的现象。

解决这个问题的方法之一是使用一个标志位来标记是否正在拖拽。可以在拖拽开始时将标志位设为true，在拖拽结束后再将其设为false。在拖拽过程中，可以检测标志位的值来判断是否进行元素的交换操作。只有当标志位为true时，才进行元素交换，避免因为快速拖拽而产生重复。

另外，还可以通过设置拖拽的延迟时间来解决这个问题。在拖拽开始时，延迟一段时间后再进行元素的交换操作。这样可以给足够的时间给鼠标释放事件触发，避免重复元素的出现。

综上所述，通过设置标志位或延迟时间来控制拖拽行为，可以解决Vue Draggable中快速拖拽导致重复元素的问题。这样可以保证在拖拽过程中的交互体验，并确保拖拽的准确性和准确性。

相关问题

vue.draggable多列数组拖拽

如果您想在多列中使用`vue.draggable`进行拖放，您可以将每列数据存储在一个数组中，并在每个数组上使用`v-for`指令来渲染列。

以下是一个示例代码：

<template>
  <div class="columns">
    <div class="column" v-for="(column, index) in columns" :key="index">
      <h3>{{ column.name }}</h3>
      <draggable :list="column.items" group="columns" @change="onChange">
        <div v-for="(item, itemIndex) in column.items" :key="itemIndex">
          {{ item }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  data() {
    return {
      columns: [
        {
          name: 'Column 1',
          items: ['Item 1', 'Item 2', 'Item 3']
        },
        {
          name: 'Column 2',
          items: ['Item 4', 'Item 5', 'Item 6']
        },
        {
          name: 'Column 3',
          items: ['Item 7', 'Item 8', 'Item 9']
        }
      ]
    };
  },
  components: {
    draggable
  },
  methods: {
    onChange(evt) {
      // handle change event
    }
  }
};
</script>

在这个例子中，我们有一个包含多个列的`columns`数组。在每个列上，我们使用`v-for`指令来渲染列，并在每个列中使用`draggable`组件来实现拖放功能。我们使用`list`属性将每个列的数据数组传递给`draggable`组件，并使用`@change`事件处理程序来处理拖放项目时的更改事件。

请注意，我们使用`group`属性来将每个列中的项目分组，以便在跨列拖放时可以正确处理项目。

vue.draggable多列数组拖拽拿到当前列的title,title=1的禁止拖拽

可以通过在拖拽开始时判断当前拖拽的元素所在的列是否为 `title=1` 来禁止拖拽。具体实现可以参考以下代码：

<template>
  <div>
    <div v-for="(col, index) in columns" :key="index" class="column">
      <div class="title" v-if="col.title === 1">{{ col.title }}</div>
      <draggable
        v-else
        :list="col.items"
        :group="{ name: 'columns', pull: 'clone', put: false }"
        :options="{animation: 150, handle: '.handle'}"
        @start="handleDragStart(index)"
        @end="handleDragEnd"
      >
        <div v-for="(item, itemIndex) in col.items" :key="itemIndex" class="item">
          <div class="handle">drag</div>
          <div class="content">{{ item }}</div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      columns: [
        {
          title: 1,
        },
        {
          title: 2,
          items: ['item 1', 'item 2', 'item 3'],
        },
        {
          title: 3,
          items: ['item 4', 'item 5', 'item 6'],
        },
      ],
    };
  },
  methods: {
    handleDragStart(index) {
      // 如果当前列的 title 为 1，则禁止拖拽
      if (this.columns[index].title === 1) {
        this.$nextTick(() => {
          this.$refs[index].draggable.cancel();
        });
      }
    },
    handleDragEnd() {
      console.log('drag end');
    },
  },
};
</script>

在上述代码中，我们使用了 `vuedraggable` 组件来实现多列数组拖拽。在每个列的 `draggable` 组件上，我们监听了 `start` 事件，在事件处理函数中通过判断当前列的 title 是否为 1 来决定是否禁止拖拽。如果需要禁止拖拽，则调用 `cancel()` 方法取消拖拽。

需要注意的是，由于 `vuedraggable` 组件渲染时会复用 DOM 元素，因此需要通过 `this.$nextTick()` 来确保可取消拖拽。同时，为了方便取消拖拽，我们在每个 `draggable` 组件上添加了 `ref` 属性，并在 `handleDragStart` 方法中使用 `this.$refs[index]` 来获取当前列的 `draggable` 实例。