当前位置：首页 > VUE

vue实现拖拽放置

2026-03-28 21:28:05VUE

Vue 实现拖拽放置功能

使用 HTML5 拖放 API

设置元素可拖拽 在需要拖拽的元素上添加 draggable 属性：
```
<div draggable="true" @dragstart="handleDragStart">拖拽元素</div>
```

处理拖拽事件 在 Vue 方法中定义拖拽相关逻辑：

methods: {
  handleDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id)
  }
}

设置放置区域 放置区域需要阻止默认行为并处理放置事件：
```
<div @dragover.prevent @drop="handleDrop">放置区域</div>
```

实现放置逻辑 在 Vue 实例中添加放置处理方法：

handleDrop(e) {
  e.preventDefault()
  const data = e.dataTransfer.getData('text/plain')
  const draggedElement = document.getElementById(data)
  e.target.appendChild(draggedElement)
}

使用第三方库实现

安装 Vue.Draggable
```
npm install vuedraggable
```

基本使用示例

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

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      myArray: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onStart() {
      console.log('拖拽开始')
    },
    onEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

实现自定义拖拽效果

添加拖拽样式

.dragging {
  opacity: 0.5;
  border: 2px dashed #666;
}

动态应用样式

handleDragStart(e) {
  e.target.classList.add('dragging')
}

handleDragEnd(e) {
  e.target.classList.remove('dragging')
}

限制放置条件

handleDrop(e) {
  if (!this.canDrop) return
  // 放置逻辑
}

跨组件拖拽实现

使用事件总线

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送拖拽数据

EventBus.$emit('item-dragged', this.itemData)

接收放置数据

EventBus.$on('item-dragged', (data) => {
  this.handleDrop(data)
})

性能优化建议

减少 DOM 操作 使用虚拟列表技术处理大量可拖拽元素
节流处理事件 对频繁触发的事件进行节流处理
使用 key 属性 为可拖拽元素添加唯一的 key 属性
避免深度监听 对于复杂数据结构，使用扁平化处理

标签: 拖拽 vue

分享给朋友：

vue实现多级表头

Vue 实现多级表头的方法使用 el-table 组件 Element UI 的 el-table 组件支持多级表头的实现，通过嵌套 el-table-column 即可完成。 <el-ta…

vue实现setinterval

在 Vue 中使用 setInterval Vue 中可以通过生命周期钩子和方法结合 setInterval 实现定时任务。以下是一个完整的实现示例： <template> <…

vue实现返回

返回按钮功能实现在Vue中实现返回功能通常有两种方式：使用浏览器历史记录的history.back()或结合Vue Router进行编程式导航。以下是具体实现方法：使用浏览器API metho…

vue实现复选

Vue 实现复选框在 Vue 中实现复选框可以通过 v-model 指令绑定数据，同时结合 input 元素的 type="checkbox" 属性来实现。以下是几种常见的实现方式：单个复选框…

vue实现toast

Vue 实现 Toast 的方法使用第三方库（推荐）对于快速实现 Toast 功能，推荐使用成熟的第三方库如 vue-toastification 或 vant 的 Toast 组件。安装 v…

vue实现编辑

Vue 实现编辑功能在 Vue 中实现编辑功能通常涉及表单绑定、状态管理和事件处理。以下是一个常见的实现方法：双向数据绑定使用 v-model 指令实现表单元素与数据的双向绑定： <i…

vue实现拖拽放置