当前位置：首页 > VUE

vue实现鼠标拖拽

2026-01-17 22:35:18VUE

实现鼠标拖拽功能

在Vue中实现鼠标拖拽功能可以通过以下步骤完成。这里提供一个基础实现方案，适用于大多数拖拽场景。

监听鼠标事件

为需要拖拽的元素绑定mousedown、mousemove和mouseup事件。在Vue的模板中添加事件监听：

<template>
  <div 
    class="draggable-element"
    @mousedown="startDrag"
    @mousemove="drag"
    @mouseup="stopDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    拖拽我
  </div>
</template>

定义数据和方法

在Vue组件中定义必要的数据和方法：

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      isDragging: false,
      startPos: { x: 0, y: 0 }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startPos = {
        x: e.clientX - this.position.x,
        y: e.clientY - this.position.y
      }
      document.addEventListener('mousemove', this.drag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    drag(e) {
      if (!this.isDragging) return
      this.position = {
        x: e.clientX - this.startPos.x,
        y: e.clientY - this.startPos.y
      }
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

添加样式

为拖拽元素添加基本样式：

<style>
.draggable-element {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  user-select: none;
}
</style>

进阶实现

对于更复杂的拖拽需求，可以考虑以下改进：

使用Vue的自定义指令封装拖拽逻辑：

Vue.directive('drag', {
  bind(el, binding) {
    let startX, startY, initialX, initialY

    el.style.position = 'absolute'
    el.style.cursor = 'move'

    el.addEventListener('mousedown', startDrag)

    function startDrag(e) {
      startX = e.clientX
      startY = e.clientY
      initialX = el.offsetLeft
      initialY = el.offsetTop

      document.addEventListener('mousemove', drag)
      document.addEventListener('mouseup', stopDrag)
      e.preventDefault()
    }

    function drag(e) {
      el.style.left = (initialX + e.clientX - startX) + 'px'
      el.style.top = (initialY + e.clientY - startY) + 'px'
    }

    function stopDrag() {
      document.removeEventListener('mousemove', drag)
      document.removeEventListener('mouseup', stopDrag)
    }
  }
})

然后在模板中使用：

<div v-drag class="draggable-element">拖拽我</div>

注意事项

拖拽实现需要考虑边界条件，如元素不能拖出可视区域。可以添加边界检查逻辑：

drag(e) {
  if (!this.isDragging) return

  let newX = e.clientX - this.startPos.x
  let newY = e.clientY - this.startPos.y

  // 限制在窗口内
  newX = Math.max(0, Math.min(newX, window.innerWidth - this.$el.offsetWidth))
  newY = Math.max(0, Math.min(newY, window.innerHeight - this.$el.offsetHeight))

  this.position = { x: newX, y: newY }
}

对于移动端支持，需要同时处理touchstart、touchmove和touchend事件，原理与鼠标事件类似。

vue实现鼠标拖拽