当前位置：首页 > VUE

vue如何实现draggable

2026-01-19 00:03:47VUE

Vue 实现 Draggable 的方法

使用第三方库 `vuedraggable`

vuedraggable 是基于 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>

使用 HTML5 原生拖拽 API

通过 HTML5 的 draggable 属性和事件实现基础拖拽功能。

示例代码：

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    draggable="true"
    @dragstart="handleDragStart($event, item)"
    @dragover.prevent
    @drop="handleDrop($event, item)"
  >
    {{ item.text }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'A' },
        { id: 2, text: 'B' }
      ],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item;
      e.dataTransfer.effectAllowed = 'move';
    },
    handleDrop(e, targetItem) {
      if (this.draggedItem !== targetItem) {
        const draggedIndex = this.items.indexOf(this.draggedItem);
        const targetIndex = this.items.indexOf(targetItem);
        this.items.splice(draggedIndex, 1);
        this.items.splice(targetIndex, 0, this.draggedItem);
      }
    }
  }
};
</script>

使用 `Sortable.js` 直接操作 DOM

适用于需要更复杂控制的场景，需手动管理 Vue 数据与 DOM 的同步。

安装 Sortable.js：

npm install sortablejs

实现示例：

<template>
  <ul ref="list">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    };
  },
  mounted() {
    new Sortable(this.$refs.list, {
      onEnd: (evt) => {
        const movedItem = this.items.splice(evt.oldIndex, 1)[0];
        this.items.splice(evt.newIndex, 0, movedItem);
      }
    });
  }
};
</script>