vue拖拽容器实现

实现 Vue 拖拽容器的基本方法

使用 HTML5 原生拖拽 API
通过 draggable 属性和拖拽事件（dragstart、dragend、dragover、drop）实现基础拖拽功能。适用于简单场景，需手动处理拖拽逻辑和数据更新。

<template>
  <div 
    v-for="item in list" 
    :key="item.id"
    draggable="true"
    @dragstart="handleDragStart($event, item)"
    @dragover.prevent
    @drop="handleDrop($event, item)"
  >
    {{ item.content }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [...],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item;
      e.dataTransfer.effectAllowed = 'move';
    },
    handleDrop(e, targetItem) {
      const fromIndex = this.list.indexOf(this.draggedItem);
      const toIndex = this.list.indexOf(targetItem);
      this.list.splice(fromIndex, 1);
      this.list.splice(toIndex, 0, this.draggedItem);
    }
  }
};
</script>

使用第三方库 Vue.Draggable

安装与基础用法
Vue.Draggable 是基于 Sortable.js 的封装，提供声明式拖拽支持。需先安装依赖：

npm install vuedraggable

示例代码：

<template>
  <draggable 
    v-model="list" 
    @end="onDragEnd"
    item-key="id"
  >
    <template #item="{ element }">
      <div>{{ element.content }}</div>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return { list: [...] };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成后的列表:', this.list);
    }
  }
};
</script>

实现拖拽排序与跨容器交换

多容器间拖拽
通过配置 group 属性实现跨容器元素交换，需确保同一组的 name 值相同。

<template>
  <div class="container">
    <draggable 
      v-model="listA" 
      group="shared" 
      item-key="id"
    >
      <!-- 列表A内容 -->
    </draggable>
    <draggable 
      v-model="listB" 
      group="shared" 
      item-key="id"
    >
      <!-- 列表B内容 -->
    </draggable>
  </div>
</template>

自定义拖拽样式与动画

添加过渡效果
利用 Vue 的 <transition-group> 或 CSS 动画增强视觉反馈：

.draggable-item {
  transition: transform 0.2s;
}
.sortable-chosen {
  background-color: #f0f0f0;
}
.sortable-ghost {
  opacity: 0.5;
}

注意事项

• 性能优化：大数据量时使用 ghostClass 和 chosenClass 减少渲染压力。
• 移动端适配：部分库需额外插件支持触摸事件（如 Sortable.js 的 touch-action 配置）。
• 数据持久化：拖拽后需同步更新后端数据，通常通过 @end 事件触发 API 调用。

通过上述方法可快速实现灵活、高性能的拖拽容器功能。复杂场景建议优先选择 Vue.Draggable 等成熟方案。