vue实现组件可拖拽

Vue 实现组件拖拽功能

在 Vue 中实现组件拖拽功能可以通过原生 HTML5 的拖放 API 或第三方库如 vuedraggable 来完成。以下是两种方法的详细实现方式。

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，通过 draggable 属性、dragstart、dragend、dragover 和 drop 事件实现拖拽功能。

<template>
  <div
    class="draggable-item"
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖拽我
  </div>
  <div
    class="drop-zone"
    @dragover.prevent
    @drop="handleDrop"
  >
    放置区域
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', 'dragged-item');
      event.target.classList.add('dragging');
    },
    handleDragEnd(event) {
      event.target.classList.remove('dragging');
    },
    handleDrop(event) {
      event.preventDefault();
      const data = event.dataTransfer.getData('text/plain');
      console.log('拖拽的数据:', data);
    },
  },
};
</script>

<style>
.draggable-item {
  padding: 10px;
  background: #f0f0f0;
  cursor: move;
}
.drop-zone {
  padding: 20px;
  background: #e0e0e0;
  margin-top: 10px;
}
.dragging {
  opacity: 0.5;
}
</style>

• draggable="true"：标记元素为可拖拽。
• @dragstart：拖拽开始时触发，用于设置拖拽数据。
• @dragover.prevent：阻止默认行为以允许放置。
• @drop：放置时触发，处理拖拽数据。

使用 vuedraggable 库

vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽库，适用于列表排序、拖拽等功能。

1. 安装 vuedraggable：

   

   npm install vuedraggable

2. 在组件中使用：

   
   <template>
   <draggable
    v-model="items"
    @end="onDragEnd"
   >
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
   </draggable>
   </template>

import draggable from 'vuedraggable';

export default { components: { draggable }, data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ], }; }, methods: { onDragEnd(event) { console.log('拖拽后的顺序:', this.items); }, }, };

```

• v-model：绑定拖拽列表的数据。
• @end：拖拽结束时触发，更新数据顺序。

拖拽限制与高级配置

1. 限制拖拽方向
   使用 vuedraggable 的 move 事件或原生 API 的 drag 事件动态判断方向。

2. 拖拽手柄
   通过指定 handle 属性限制只有特定元素可触发拖拽：

   <draggable handle=".handle">
   <div v-for="item in items" :key="item.id">
    <span class="handle">☰</span>
    {{ item.name }}
   </div>
   </draggable>

3. 跨组件拖拽
   使用 group 属性实现跨组件的拖拽：

   <draggable group="shared-group" v-model="listA" />
   <draggable group="shared-group" v-model="listB" />

注意事项

• 原生 API 兼容性较好，但实现复杂交互需额外代码。
• vuedraggable 更适合列表排序等场景，但依赖第三方库。
• 移动端支持需额外处理触摸事件（如 touchstart、touchmove）。