vue使用插件实现拖拽

安装拖拽插件

推荐使用vuedraggable插件，它是基于Sortable.js的Vue组件，支持拖拽排序功能。通过npm或yarn安装：

npm install vuedraggable --save
# 或
yarn add vuedraggable

基础用法示例

在Vue组件中引入并注册vuedraggable，通过v-model绑定数据实现列表拖拽排序：

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

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('排序后的列表:', this.list);
    }
  }
};
</script>

跨列表拖拽

通过group属性实现不同列表间的元素转移：

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

自定义拖拽手柄

通过handle属性指定拖拽触发区域，避免整个元素可拖拽：

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

禁用拖拽功能

通过disabled属性动态控制拖拽状态：

<draggable v-model="list" :disabled="isLocked">
  <!-- 列表内容 -->
</draggable>

动画效果

添加animation属性改善视觉体验，例如设置animation: 150表示150毫秒的过渡动画：

<draggable v-model="list" :animation="150">
  <!-- 列表内容 -->
</draggable>

注意事项

1. 数据绑定需使用v-model而非:list（旧版本语法）
2. 跨组件通信时建议使用Vuex管理共享状态
3. 移动端需添加CSS样式touch-action: none解决触摸冲突
4. 复杂场景可结合clone和pull属性控制拖拽行为