当前位置：首页 > VUE

vue实现拖拽插件

2026-01-18 14:41:14VUE

Vue 拖拽插件实现方法

使用原生 HTML5 拖拽 API

HTML5 提供了原生的拖拽 API，可以直接在 Vue 中使用。以下是一个简单的示例：

<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);
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
}
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 拖拽组件，功能强大且易于使用。

安装：

vue实现拖拽插件

npm install vuedraggable

基本用法：

<template>
  <draggable 
    v-model="list" 
    @end="onEnd"
  >
    <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' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    onEnd() {
      console.log('拖拽结束，新顺序:', this.list);
    }
  }
}
</script>

自定义拖拽指令

可以创建自定义指令来实现更灵活的拖拽功能：

vue实现拖拽插件

// directives/drag.js
export default {
  inserted(el, binding) {
    el.setAttribute('draggable', true);

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', binding.value);
      el.style.opacity = '0.5';
    });

    el.addEventListener('dragend', () => {
      el.style.opacity = '1';
    });
  }
}

在 Vue 中使用：

<template>
  <div v-drag="'自定义拖拽数据'">拖拽我</div>
</template>

<script>
import drag from './directives/drag';

export default {
  directives: { drag }
}
</script>

拖拽排序与动画

结合 Vue 的过渡动画可以实现更流畅的拖拽体验：

<template>
  <draggable v-model="items" tag="ul">
    <transition-group name="list">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </transition-group>
  </draggable>
</template>

<style>
.list-move {
  transition: transform 0.3s ease;
}
</style>

跨组件拖拽

实现跨组件拖拽需要共享状态管理，可以使用 Vuex：

// store.js
export default new Vuex.Store({
  state: {
    draggedItem: null,
    dropZones: []
  },
  mutations: {
    setDraggedItem(state, item) {
      state.draggedItem = item;
    },
    addToZone(state, {zoneId, item}) {
      const zone = state.dropZones.find(z => z.id === zoneId);
      if (zone) zone.items.push(item);
    }
  }
});

<!-- 拖拽源组件 -->
<template>
  <div 
    draggable 
    @dragstart="dragStart(item)"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  methods: {
    dragStart(item) {
      this.$store.commit('setDraggedItem', item);
    }
  }
}
</script>

<!-- 放置目标组件 -->
<template>
  <div 
    @dragover.prevent 
    @drop="handleDrop"
  >
    <div v-for="item in zoneItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    zoneItems() {
      return this.$store.state.dropZones.find(z => z.id === this.zoneId).items;
    }
  },
  methods: {
    handleDrop() {
      const item = this.$store.state.draggedItem;
      this.$store.commit('addToZone', {zoneId: this.zoneId, item});
    }
  }
}
</script>