当前位置：首页 > VUE

vue实现鼠标拖拽

2026-03-10 04:19:15VUE

Vue 实现鼠标拖拽功能

基础拖拽实现

使用 @mousedown、@mousemove 和 @mouseup 事件监听器实现基础拖拽逻辑。在 Vue 组件的 data 中定义拖拽状态变量：

data() {
  return {
    isDragging: false,
    startX: 0,
    startY: 0,
    offsetX: 0,
    offsetY: 0
  }
}

模板中添加事件绑定：

<div 
  @mousedown="startDrag"
  @mousemove="onDrag"
  @mouseup="endDrag"
  :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
>
  可拖拽元素
</div>

事件处理函数

实现三个核心事件处理函数：

methods: {
  startDrag(e) {
    this.isDragging = true
    this.startX = e.clientX - this.offsetX
    this.startY = e.clientY - this.offsetY
  },
  onDrag(e) {
    if (!this.isDragging) return
    this.offsetX = e.clientX - this.startX
    this.offsetY = e.clientY - this.startY
  },
  endDrag() {
    this.isDragging = false
  }
}

优化性能

为防止频繁触发 mousemove 事件导致性能问题，建议使用 requestAnimationFrame：

onDrag(e) {
  if (!this.isDragging) return
  window.requestAnimationFrame(() => {
    this.offsetX = e.clientX - this.startX
    this.offsetY = e.clientY - this.startY
  })
}

拖拽限制

添加边界限制防止元素被拖出可视区域：

onDrag(e) {
  if (!this.isDragging) return
  const newX = e.clientX - this.startX
  const newY = e.clientY - this.startY
  this.offsetX = Math.max(0, Math.min(newX, window.innerWidth - this.$el.offsetWidth))
  this.offsetY = Math.max(0, Math.min(newY, window.innerHeight - this.$el.offsetHeight))
}

使用第三方库

对于复杂拖拽需求，可以考虑使用专门库：

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

基本使用示例：

<draggable v-model="list" group="items">
<div v-for="item in list" :key="item.id">
 {{ item.name }}
</div>
</draggable>

import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}

移动端适配

添加触摸事件支持以实现移动端兼容：

<div
  @mousedown="startDrag"
  @touchstart="startDrag"
  @mousemove="onDrag"
  @touchmove="onDrag"
  @mouseup="endDrag"
  @touchend="endDrag"
>
  可拖拽元素
</div>

修改事件处理函数：

startDrag(e) {
  const clientX = e.clientX || e.touches[0].clientX
  const clientY = e.clientY || e.touches[0].clientY
  this.isDragging = true
  this.startX = clientX - this.offsetX
  this.startY = clientY - this.offsetY
}

拖拽排序实现

使用自定义实现实现列表拖拽排序：

vue实现鼠标拖拽

methods: {
  onDragOver(index, e) {
    e.preventDefault()
    const rect = this.$el.getBoundingClientRect()
    const y = e.clientY - rect.top
    const itemHeight = rect.height / this.items.length
    const newIndex = Math.floor(y / itemHeight)
    if (index !== newIndex) {
      const newItems = [...this.items]
      const [removed] = newItems.splice(index, 1)
      newItems.splice(newIndex, 0, removed)
      this.items = newItems
    }
  }
}