vue实现位移拖动

Vue 实现位移拖动的方法

使用鼠标事件实现拖动

在 Vue 中可以通过监听鼠标事件实现元素的位移拖动。需要监听 mousedown、mousemove 和 mouseup 事件来跟踪拖动过程。

<template>
  <div
    ref="draggableElement"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    可拖动的元素
  </div>
</template>

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

使用 CSS transform 实现平滑拖动

CSS transform 可以提供更平滑的拖动效果，避免重排导致的性能问题。

<template>
  <div
    ref="draggableElement"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
  >
    可拖动的元素
  </div>
</template>

使用第三方库 vue-draggable

vue-draggable 是一个流行的 Vue 拖动库，提供了更丰富的功能和更好的性能。

安装：

npm install vuedraggable

使用：

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

<script>
import draggable from 'vuedraggable'

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

移动端触摸事件支持

为支持移动端设备，需要添加触摸事件处理。

<template>
  <div
    ref="draggableElement"
    @mousedown="startDrag"
    @touchstart="startDrag"
    @mousemove="onDrag"
    @touchmove="onDrag"
    @mouseup="endDrag"
    @touchend="endDrag"
    :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
  >
    可拖动的元素
  </div>
</template>

<script>
export default {
  methods: {
    startDrag(e) {
      const clientX = e.clientX || e.touches[0].clientX
      const clientY = e.clientY || e.touches[0].clientY
      // 其余逻辑与鼠标事件相同
    }
  }
}
</script>

边界限制

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

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

  const newX = e.clientX - this.startPosition.x
  const newY = e.clientY - this.startPosition.y

  // 获取父容器尺寸
  const parentWidth = this.$el.parentElement.clientWidth
  const parentHeight = this.$el.parentElement.clientHeight

  // 获取元素尺寸
  const elWidth = this.$el.clientWidth
  const elHeight = this.$el.clientHeight

  // 限制边界
  this.position = {
    x: Math.max(0, Math.min(newX, parentWidth - elWidth)),
    y: Math.max(0, Math.min(newY, parentHeight - elHeight))
  }
}

这些方法提供了在 Vue 中实现元素位移拖动的基本方案，可以根据具体需求选择适合的实现方式。