当前位置：首页 > VUE

vue实现拖放

2026-01-07 08:03:38VUE

Vue 实现拖放功能

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

使用 HTML5 原生拖放 API

HTML5 提供了原生的拖放 API，可以通过 draggable 属性、dragstart、dragover 和 drop 等事件实现拖放功能。

vue实现拖放

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      event.dataTransfer.setData('text/plain', item.id);
    },
    handleDrop(event) {
      event.preventDefault();
      if (this.draggedItem) {
        // 处理拖放逻辑
        console.log('Dropped:', this.draggedItem);
        this.draggedItem = null;
      }
    }
  }
};
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
.drop-zone {
  padding: 20px;
  margin: 10px;
  background: #e0e0e0;
  border: 2px dashed #ccc;
}
</style>

使用 `vuedraggable` 库

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

vue实现拖放

安装 vuedraggable：

npm install vuedraggable

示例代码：

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

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      console.log('Drag ended:', this.items);
    }
  }
};
</script>

<style>
.drag-list {
  padding: 10px;
  background: #f8f8f8;
}
.draggable-item {
  padding: 8px;
  margin: 5px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: move;
}
</style>