vue 实现拖拽插件

实现拖拽功能的基础方法

使用 Vue 的 v-draggable 指令或第三方库如 vue-draggable 可以快速实现拖拽功能。安装 vue-draggable 库：

npm install vuedraggable

在组件中引入并注册：

import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};

模板中使用：

<draggable v-model="list" @end="onDragEnd">
  <div v-for="(item, index) in list" :key="index">{{ item }}</div>
</draggable>

自定义拖拽指令

通过 Vue 的自定义指令实现拖拽功能。创建一个全局指令：

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true);
    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', binding.value);
    });
  }
});

在组件中使用：

<div v-drag="item" v-for="(item, index) in list" :key="index">{{ item }}</div>

拖拽排序与状态管理

结合 Vuex 管理拖拽后的数据状态。在 Vuex 中定义 mutations：

mutations: {
  updateList(state, newList) {
    state.list = newList;
  }
}

在组件中提交变更：

methods: {
  onDragEnd() {
    this.$store.commit('updateList', this.list);
  }
}

拖拽动画与样式优化

通过 CSS 过渡效果增强拖拽体验。添加拖拽时的样式：

.drag-item {
  transition: transform 0.2s ease;
}
.drag-item.drag-over {
  background-color: #f0f0f0;
}

在指令中动态添加类名：

el.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.target.classList.add('drag-over');
});
el.addEventListener('dragleave', (e) => {
  e.target.classList.remove('drag-over');
});

跨组件拖拽实现

使用事件总线或 Vuex 实现跨组件拖拽。创建事件总线：

export const EventBus = new Vue();

在拖拽源组件中发射事件：

el.addEventListener('dragstart', () => {
  EventBus.$emit('drag-start', data);
});

在目标组件中监听事件：

mounted() {
  EventBus.$on('drag-start', (data) => {
    this.handleDrop(data);
  });
}

移动端拖拽适配

针对移动端添加触摸事件支持。扩展自定义指令：

el.addEventListener('touchstart', handleTouchStart);
el.addEventListener('touchmove', handleTouchMove);
el.addEventListener('touchend', handleTouchEnd);

实现触摸事件处理函数：

function handleTouchStart(e) {
  // 记录初始位置
}
function handleTouchMove(e) {
  // 计算移动距离并更新元素位置
}

性能优化建议

对于大型列表使用虚拟滚动技术。结合 vue-virtual-scroller：

npm install vue-virtual-scroller

在组件中使用虚拟列表：

<RecycleScroller :items="list" :item-size="50">
  <template v-slot="{ item }">
    <div v-drag="item">{{ item }}</div>
  </template>
</RecycleScroller>

高级拖拽交互

实现拖拽放置区域的高亮反馈。使用指令参数：

Vue.directive('drop', {
  bind(el, binding) {
    el.addEventListener('dragover', (e) => {
      e.preventDefault();
      binding.value(true);
    });
    el.addEventListener('dragleave', () => {
      binding.value(false);
    });
  }
});

在模板中绑定状态：

<div v-drop="setDropActive" :class="{ 'drop-active': isDropActive }"></div>