vue2通过mousedown、mousemove、mouseup实现拖拽绘制矩形

Vue2中实现拖拽并绘制矩形的功能通常涉及到事件监听（`mousedown`、`mousemove`、`mouseup`）以及一些基本的DOM操作。以下是简单的步骤：

1. **初始化**：
首先，你需要在组件的模板上添加一个可拖动的元素，比如一个div，并设置初始的坐标和状态（如`isDragging`和`startPoint`）。

<div ref="dragElement" @mousedown.prevent="handleMouseDown" @mouseup="handleMouseUp"></div>

2. **处理mousedown**：
当用户点击鼠标按钮时，记录下鼠标按下时的位置（即起始点），并将`isDragging`设为`true`。

methods: {
  handleMouseDown(e) {
    this.startPoint = { x: e.clientX, y: e.clientY };
    this.isDragging = true;
  }
}

3. **处理mousemove**：
用户拖动鼠标时，更新目标元素的位置，使其跟随鼠标的移动。这里你可以直接修改`ref`元素的样式属性，改变left和top属性来调整位置。

handleMouseMove(e) {
  if (this.isDragging) {
    const endPoint = { x: e.clientX, y: e.clientY };
    // 计算拖动距离
    const dx = endPoint.x - this.startPoint.x;
    const dy = endPoint.y - this.startPoint.y;
    // 更新元素位置
    this.$refs.dragElement.style.left = `${this.$refs.dragElement.offsetLeft + dx}px`;
    this.$refs.dragElement.style.top = `${this.$refs.dragElement.offsetTop + dy}px`;
  }
}

4. **处理mouseup**：
当用户释放鼠标时，停止跟踪并清除状态。

handleMouseUp() {
  this.isDragging = false;
}

5. **完整的组件示例**：

<template>
  <div ref="dragElement" :style="{ left: '0px', top: '0px' }" @mousedown.prevent="handleMouseDown" @mouseup="handleMouseUp">
    拖动我
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseDown(e) {
      this.startPoint = { x: e.clientX, y: e.clientY };
      this.isDragging = true;
    },
    handleMouseMove(e) {
      if (this.isDragging) {
        // ...
      }
    },
    handleMouseUp() {
      this.isDragging = false;
    }
  }
};
</script>