当前位置：首页 > VUE

vue实现拖拽的插件

2026-01-22 17:49:43VUE

vue-draggable

基于Sortable.js封装，适用于Vue 2/3的拖拽排序组件，支持列表、表格、跨容器拖拽。

安装

npm install vuedraggable

基本用法（Vue 3）

<template>
  <draggable 
    v-model="list" 
    item-key="id" 
    @end="onDragEnd">
    <template #item="{ element }">
      <div>{{ element.name }}</div>
    </template>
  </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('拖拽完成');
    }
  }
};
</script>

Vue.Draggable.Next

Vue 3专用版本，功能与vuedraggable类似，但针对Composition API优化。

安装

npm install vue-draggable-next

示例

<template>
  <draggable 
    v-model="items" 
    :group="{ name: 'shared' }">
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </draggable>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vue-draggable-next';

const items = ref([
  { id: 1, text: 'A' },
  { id: 2, text: 'B' }
]);
</script>

interact.js集成

若需要更复杂的拖拽交互（如缩放、旋转），可直接集成interact.js。

基础实现

<template>
  <div 
    ref="dragEl" 
    class="draggable-box">
    拖拽我
  </div>
</template>

<script>
import interact from 'interactjs';
export default {
  mounted() {
    interact(this.$refs.dragEl)
      .draggable({
        onmove: (event) => {
          const target = event.target;
          const x = (parseFloat(target.style.left) || 0) + event.dx;
          const y = (parseFloat(target.style.top) || 0) + event.dy;
          target.style.transform = `translate(${x}px, ${y}px)`;
        }
      });
  }
};
</script>