vue实现鼠标拖拽

实现鼠标拖拽的基本思路

在Vue中实现鼠标拖拽功能，主要通过监听鼠标事件（mousedown、mousemove、mouseup）来实现。核心逻辑包括记录初始位置、计算偏移量、更新元素位置。

基础实现代码示例

<template>
  <div 
    ref="draggableElement"
    @mousedown="startDrag"
    :style="elementStyle"
  >
    可拖拽元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0
    };
  },
  computed: {
    elementStyle() {
      return {
        position: 'absolute',
        left: `${this.offsetX}px`,
        top: `${this.offsetY}px`,
        cursor: this.isDragging ? 'grabbing' : 'grab'
      };
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX - this.offsetX;
      this.startY = e.clientY - this.offsetY;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(e) {
      if (!this.isDragging) return;
      this.offsetX = e.clientX - this.startX;
      this.offsetY = e.clientY - this.startY;
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

使用第三方库

对于更复杂的拖拽需求，可以使用专门的拖拽库如vuedraggable或sortablejs。

安装vuedraggable：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="list" @start="drag=true" @end="drag=false">
    <div v-for="item in list" :key="item.id">{{ item.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' }
      ]
    };
  }
};
</script>

边界限制处理

为了防止元素被拖出可视区域，可以在onDrag方法中添加边界检查：

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

  let newX = e.clientX - this.startX;
  let newY = e.clientY - this.startY;

  // 获取容器尺寸
  const container = this.$el.parentElement;
  const containerRect = container.getBoundingClientRect();
  const elementRect = this.$el.getBoundingClientRect();

  // 限制在容器内
  this.offsetX = Math.max(0, Math.min(newX, containerRect.width - elementRect.width));
  this.offsetY = Math.max(0, Math.min(newY, containerRect.height - elementRect.height));
}

性能优化建议

对于频繁的DOM操作，可以使用CSS的transform属性代替直接修改left/top值，因为transform不会触发重排：

elementStyle() {
  return {
    transform: `translate(${this.offsetX}px, ${this.offsetY}px)`,
    cursor: this.isDragging ? 'grabbing' : 'grab'
  };
}

移动端适配

如果需要支持触摸设备，可以添加相应的事件监听：

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;

  document.addEventListener('mousemove', this.onDrag);
  document.addEventListener('touchmove', this.onDrag);
  document.addEventListener('mouseup', this.stopDrag);
  document.addEventListener('touchend', this.stopDrag);
}