当前位置：首页 > VUE

vue 实现拖动效果

2026-01-18 02:33:00VUE

使用 Vue 实现拖动效果

Vue 提供了多种方式实现拖动效果，可以通过原生 HTML5 的拖放 API，也可以使用第三方库如 vuedraggable。以下是两种常见的方法：

使用 HTML5 拖放 API

HTML5 的拖放 API 可以直接在 Vue 中使用，通过监听 dragstart、dragend、dragover 和 drop 事件来实现拖动效果。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragend="handleDragEnd"
      @dragover.prevent
      @drop="handleDrop(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(index) {
      this.draggedIndex = index;
    },
    handleDragEnd() {
      this.draggedIndex = null;
    },
    handleDrop(index) {
      if (this.draggedIndex !== null) {
        const item = this.items.splice(this.draggedIndex, 1)[0];
        this.items.splice(index, 0, item);
      }
    }
  }
};
</script>

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

使用 `vuedraggable` 库

vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽组件，使用起来更加简单和高效。

安装 vuedraggable：

npm install vuedraggable

在 Vue 中使用：

vue 实现拖动效果

<template>
  <div>
    <draggable 
      v-model="items" 
      @end="onDragEnd"
      class="drag-area"
    >
      <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('Drag ended', this.items);
    }
  }
};
</script>

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