vue 实现拖拽插件

实现拖拽插件的方法

使用HTML5原生拖拽API

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

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    可拖拽元素
  </div>
  <div 
    @dragover="handleDragOver"
    @drop="handleDrop"
  >
    放置区域
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '拖拽数据');
    },
    handleDragOver(e) {
      e.preventDefault();
    },
    handleDrop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      console.log('接收到的数据:', data);
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
}
</script>

使用第三方库Vue.Draggable

Vue.Draggable是基于Sortable.js的Vue拖拽组件，支持列表排序、跨列表拖拽等功能。

安装依赖：

npm install vuedraggable

使用示例：

<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>

自定义拖拽指令

通过Vue自定义指令实现更灵活的拖拽控制，适合需要高度定制的场景。

<template>
  <div v-draggable @drag-start="onDragStart">
    自定义拖拽元素
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el, binding) {
        el.setAttribute('draggable', true);
        el.addEventListener('dragstart', (e) => {
          binding.value && binding.value(e);
          e.dataTransfer.setData('text/plain', el.textContent);
        });
      }
    }
  },
  methods: {
    onDragStart(e) {
      console.log('自定义拖拽开始', e);
    }
  }
}
</script>

拖拽状态管理

使用Vuex或Pinia管理拖拽状态，实现跨组件通信和状态共享。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    draggedItem: null,
    dropTarget: null
  },
  mutations: {
    setDraggedItem(state, item) {
      state.draggedItem = item;
    },
    setDropTarget(state, target) {
      state.dropTarget = target;
    }
  }
});

在组件中使用：

<template>
  <div 
    draggable 
    @dragstart="dragStart(item)"
    @drop="drop(item)"
  >
    {{ item.name }}
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  props: ['item'],
  methods: {
    ...mapMutations(['setDraggedItem', 'setDropTarget']),
    dragStart(item) {
      this.setDraggedItem(item);
    },
    drop(item) {
      this.setDropTarget(item);
      // 执行拖拽逻辑
    }
  }
}
</script>

性能优化建议

对于大量拖拽元素的情况，使用虚拟滚动技术减少DOM操作。结合vue-virtual-scroller等库提升性能。

npm install vue-virtual-scroller

示例：

<template>
  <RecycleScroller
    :items="largeList"
    :item-size="50"
    v-slot="{ item }"
  >
    <draggable>
      {{ item.name }}
    </draggable>
  </RecycleScroller>
</template>