当前位置：首页 > VUE

vue实现拖拽配置

2026-01-19 17:13:28VUE

Vue 实现拖拽功能

在 Vue 中实现拖拽功能可以通过原生 HTML5 的拖拽 API 或第三方库（如 vuedraggable）来完成。以下是两种常见的实现方式：

使用 HTML5 拖拽 API

HTML5 提供了原生的拖拽 API，通过 draggable 属性和事件（如 dragstart、dragend、dragover、drop）实现。

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      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.list.findIndex(item => item.id === this.draggedItem.id);
      const targetIndex = this.list.findIndex(item => item.id === targetItem.id);

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

使用 `vuedraggable` 库

vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽库，简化了拖拽列表的实现。

安装 vuedraggable：
```
npm install vuedraggable
```

在组件中使用：


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

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: { onDragEnd() { console.log('拖拽完成', this.list); }, }, };

```

拖拽配置选项（`vuedraggable`）

vuedraggable 提供了丰富的配置选项，例如：

group：定义拖拽组，允许跨列表拖拽。
animation：设置拖拽动画效果。
handle：指定拖拽手柄（如仅允许通过按钮拖拽）。

<draggable 
  v-model="list"
  group="items"
  animation="300"
  handle=".drag-handle"
>
  <div v-for="item in list" :key="item.id">
    <span class="drag-handle">☰</span>
    {{ item.name }}
  </div>
</draggable>

跨组件拖拽

通过 Vuex 或事件总线实现跨组件数据同步：

// 在 Vuex 中定义 state 和 mutations
const store = new Vuex.Store({
  state: {
    items: [...],
  },
  mutations: {
    updateItems(state, newItems) {
      state.items = newItems;
    },
  },
});

// 组件中通过 v-model 绑定 Vuex 数据
<draggable v-model="items" @end="commitChanges">
  <!-- 列表内容 -->
</draggable>

methods: {
  commitChanges() {
    this.$store.commit('updateItems', this.items);
  },
},