当前位置：首页 > VUE

vue实现可拖拽

2026-02-18 21:53:23VUE

Vue 实现可拖拽功能

在 Vue 中实现拖拽功能可以通过原生 HTML5 的拖拽 API 或第三方库如 vuedraggable 来实现。以下是两种方法的详细说明。

使用 HTML5 拖拽 API

HTML5 提供了原生的拖拽 API，通过 draggable 属性、dragstart、dragend 等事件实现拖拽功能。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedIndex = index;
      event.dataTransfer.setData('text/plain', index);
    },
    handleDrop(event, index) {
      const draggedItem = this.items[this.draggedIndex];
      this.items.splice(this.draggedIndex, 1);
      this.items.splice(index, 0, draggedItem);
    }
  }
};
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

使用 `vuedraggable` 库

vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽组件，简化了拖拽功能的实现。

安装 vuedraggable：

npm install vuedraggable

示例代码：

<template>
  <div>
    <draggable 
      v-model="items" 
      @end="onDragEnd"
      class="draggable-list"
    >
      <div v-for="(item, index) in items" :key="index" class="draggable-item">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

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

<style>
.draggable-list {
  padding: 10px;
}
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

拖拽功能的进阶用法

跨列表拖拽

vuedraggable 支持跨列表拖拽，只需在多个 draggable 组件中设置相同的 group 属性。

<template>
  <div>
    <draggable 
      v-model="list1" 
      group="items" 
      class="draggable-list"
    >
      <div v-for="(item, index) in list1" :key="index" class="draggable-item">
        {{ item }}
      </div>
    </draggable>
    <draggable 
      v-model="list2" 
      group="items" 
      class="draggable-list"
    >
      <div v-for="(item, index) in list2" :key="index" class="draggable-item">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list1: ['Item A', 'Item B', 'Item C'],
      list2: ['Item X', 'Item Y', 'Item Z']
    };
  }
};
</script>

限制拖拽方向

通过 draggable 的 move 方法可以限制拖拽方向或条件。

vue实现可拖拽

<template>
  <div>
    <draggable 
      v-model="items" 
      :move="checkMove"
    >
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  methods: {
    checkMove(evt) {
      // 仅允许从第一个位置拖拽
      return evt.draggedContext.index === 0;
    }
  }
};
</script>