当前位置：首页 > VUE

用vue实现拖拽

2026-01-17 18:41:43VUE

使用 Vue 实现拖拽功能

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

使用 HTML5 拖拽 API

HTML5 提供了原生的拖拽事件（dragstart、dragend、dragover、drop 等），结合 Vue 的数据绑定和事件处理，可以实现基础的拖拽功能。

拖拽元素设置

为需要拖拽的元素添加 draggable="true" 属性，并绑定 dragstart 事件，传递拖拽数据。

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

拖拽目标设置

为拖拽目标区域绑定 dragover 和 drop 事件，阻止默认行为并处理数据更新。

<template>
  <div 
    @dragover.prevent
    @drop.prevent="handleDrop"
  >
    Drop here
  </div>
</template>

事件处理逻辑

在 Vue 的 methods 中实现拖拽事件的处理逻辑。

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      draggedItem: null,
    };
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      event.dataTransfer.setData('text/plain', item.id);
    },
    handleDrop(event) {
      const itemId = event.dataTransfer.getData('text/plain');
      const droppedItem = this.items.find(item => item.id === parseInt(itemId));
      // 更新数据逻辑
      console.log('Dropped:', droppedItem);
    },
  },
};
</script>

使用 `vuedraggable` 库

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

安装依赖

通过 npm 或 yarn 安装 vuedraggable。

npm install vuedraggable

基本用法

引入 vuedraggable 并绑定数据，通过 v-model 实现双向绑定。

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

组件逻辑

在 Vue 组件中注册 draggable 并定义数据和方法。

<script>
import draggable from 'vuedraggable';

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

进阶配置

vuedraggable 支持多种配置选项，如动画、拖拽手柄等。

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