vue 实现拖拽插件

Vue 拖拽插件实现方法

使用原生 HTML5 Drag and Drop API

HTML5 提供了原生拖拽 API，可以直接在 Vue 中使用。通过 draggable 属性、dragstart、draggable、drop 等事件实现基础拖拽功能。

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

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

使用第三方库 vue-draggable

vue-draggable 是基于 Sortable.js 的 Vue 拖拽组件，适合列表排序、拖拽等功能。安装后通过组件形式快速实现复杂拖拽交互。

安装：

npm install vuedraggable

使用示例：

<template>
  <draggable 
    v-model="list" 
    @start="dragStart" 
    @end="dragEnd"
  >
    <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: '项目1' },
        { id: 2, name: '项目2' }
      ]
    };
  }
}
</script>

自定义拖拽指令

通过 Vue 自定义指令实现更灵活的拖拽逻辑，适合需要高度定制的场景。注册全局指令处理拖拽事件和样式。

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true);
    el.style.cursor = 'move';

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text', binding.value);
      el.classList.add('dragging');
    });

    el.addEventListener('dragend', () => {
      el.classList.remove('dragging');
    });
  }
});

拖拽状态与动画优化

添加过渡效果提升用户体验，结合 Vue 的 <transition> 组件实现平滑的拖拽动画。通过 CSS 控制拖拽过程中的样式变化。

.dragging {
  opacity: 0.5;
  background: #f0f0f0;
}
.drag-ghost {
  opacity: 0.8;
  transform: scale(1.02);
}

<transition-group name="list" tag="div">
  <div v-for="item in items" v-drag="item.id" :key="item.id">
    {{ item.text }}
  </div>
</transition-group>

跨组件拖拽实现

通过 Vuex 或事件总线管理拖拽状态，实现跨组件数据传递。在拖拽开始和结束时更新共享状态，确保不同组件间的数据同步。

// 使用事件总线
EventBus.$on('item-dragged', (payload) => {
  // 处理跨组件拖拽逻辑
});

移动端适配方案

针对移动端添加 touchstart、touchmove 等事件支持，使用 hammer.js 等库处理触摸操作。注意阻止默认行为避免页面滚动冲突。

el.addEventListener('touchmove', (e) => {
  e.preventDefault();
  // 计算移动距离更新元素位置
}, { passive: false });