当前位置：首页 > VUE

vue实现简单拖拽

2026-01-17 14:01:21VUE

Vue 实现简单拖拽功能

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

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，结合 Vue 的事件绑定可以快速实现拖拽功能。

<template>
  <div>
    <!-- 拖拽源 -->
    <div 
      draggable="true" 
      @dragstart="handleDragStart"
      class="draggable-item"
    >
      拖拽元素
    </div>

    <!-- 放置目标 -->
    <div 
      @dragover.prevent
      @drop="handleDrop"
      class="drop-target"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      // 设置拖拽数据
      e.dataTransfer.setData('text/plain', '拖拽数据');
    },
    handleDrop(e) {
      // 获取拖拽数据
      const data = e.dataTransfer.getData('text/plain');
      console.log('拖拽数据:', data);
    }
  }
};
</script>

<style>
.draggable-item {
  width: 100px;
  height: 100px;
  background: lightblue;
  cursor: move;
}

.drop-target {
  width: 200px;
  height: 200px;
  background: lightgray;
  margin-top: 20px;
}
</style>

关键点：

draggable="true" 标记元素为可拖拽。
@dragstart 事件在拖拽开始时触发，用于设置拖拽数据。
@dragover.prevent 阻止默认行为以允许放置。
@drop 事件在元素放置时触发，用于处理拖拽数据。

使用 `vuedraggable` 库

对于更复杂的拖拽需求（如列表排序），可以使用 vuedraggable 库。

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

示例代码：


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

import draggable from 'vuedraggable';

export default { components: { draggable }, data() { return { list: [ { id: 1, text: '项目 1' }, { id: 2, text: '项目 2' }, { id: 3, text: '项目 3' } ] }; }, methods: { onDragEnd() { console.log('拖拽后的列表:', this.list); } } };

.list-container { width: 200px; }

.list-item { padding: 10px; margin: 5px; background: lightgreen; cursor: move; }

```

关键点：

vue实现简单拖拽