当前位置：首页 > VUE

vue.js实现拖拽

2026-01-21 21:39:22VUE

Vue.js 实现拖拽功能

Vue.js 提供了多种方式实现拖拽功能，既可以利用原生 HTML5 的拖放 API，也可以借助第三方库如 vuedraggable。以下是两种常见实现方法：

使用 HTML5 原生拖放 API

HTML5 提供了 draggable 属性以及相关事件（dragstart、dragend、dragover、drop 等），结合 Vue 的数据绑定可以实现基础拖拽功能。

模板部分：

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

脚本部分：

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
      ],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      event.dataTransfer.setData('text/plain', item.id);
    },
    handleDrop(event, targetItem) {
      if (this.draggedItem === targetItem) return;

      const draggedIndex = this.items.findIndex(item => item.id === this.draggedItem.id);
      const targetIndex = this.items.findIndex(item => item.id === targetItem.id);

      this.items.splice(draggedIndex, 1);
      this.items.splice(targetIndex, 0, this.draggedItem);
    }
  }
};
</script>

使用 `vuedraggable` 库

vuedraggable 是基于 Sortable.js 的 Vue 组件，提供了更简单易用的 API 和丰富的功能（如动画、跨列表拖拽等）。

安装：

npm install vuedraggable

使用示例：

<template>
  <draggable 
    v-model="items" 
    @end="onDragEnd"
  >
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成后的顺序:', this.items);
    }
  }
};
</script>

跨列表拖拽

vuedraggable 支持跨列表拖拽，只需通过 group 属性指定相同的分组名：

<template>
  <div class="container">
    <draggable 
      v-model="list1" 
      group="items" 
      class="list"
    >
      <div v-for="item in list1" :key="item.id">
        {{ item.text }}
      </div>
    </draggable>

    <draggable 
      v-model="list2" 
      group="items" 
      class="list"
    >
      <div v-for="item in list2" :key="item.id">
        {{ item.text }}
      </div>
    </draggable>
  </div>
</template>