手把手教你用原生js实现按住鼠标拖动画框

如何用原生js实现如下图所示的拖放鼠标画框呢？

react.gif

鼠标拖动实现画框，首先要了解一下鼠标事件

有哪些鼠标事件呢？常用鼠标事件包括：鼠标按键点击和弹起 mousedown/mouseup，鼠标移入移出dom mouseover/mouseout，鼠标在元素上移动mousemove

分析一下画个框的基本思路：

首先需要在画框区域内放置一个矩形框用来作为拖动画框的初始形状，这需要一个起点作为矩形框的左上顶点，拖动鼠标改变矩形的宽高，直到画出满意的尺寸。

限定画框区域DOM，获取这个区域到浏览器边界的距离，Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置：

画布区域

Element.getBoundingClientRect()   // 返回元素的大小及其相对于视口的位置
Element.getBoundingClientRect().x   // 返回元素相对于视口X轴的距离(px)
Element.getBoundingClientRect().y   // 返回元素相对于视口Y轴的距离(px)

定义矩形框，初始化样式：
html：

style：

.draw-box {
      width: 400px;
      height: 400px;
      background-color: black;
      margin: 10px auto;
      position: relative;
    }
    .react-box {
      width: 10px;
      height: 10px;
      border: 2px dashed red;
      position: absolute;
      cursor: pointer;
      visibility: hidden;
    }

进入画框区域按住鼠标获取起点（监听mousedown事件获取起点坐标）：

// 鼠标按下监听
mousedown ($event) {
  console.log( `clientX：${$event.clientX}`, `clientY：${$event.clientY}`)
// $event.clientX 鼠标位置相对视窗X轴的坐标
// $event.clientY鼠标位置相对视窗Y轴的坐标
}

按住鼠标拖放，监听鼠标移动持续获取鼠标坐标，并改变矩形框的宽高：

// 监听鼠标移动事件
mousemove ($event) {
  console.log($event, `clientX：${$event.clientX}`, `clientY：${$event.clientY}`)
}

放开按键完成绘制，监听鼠标按键弹起事件获取鼠标终点：

// 监听鼠标按键弹起事件
mouseup ($event) {
  console.log(', $event, `clientX：${$event.clientX}`, `clientY：${$event.clientY}`)
}

串联完整流程，优化逻辑。

梳理流程并完善逻辑

画布已经准备好了，矩形框也准备好了，但是矩形框不能鼠标还没操作就显示出来吧。所以还要通过样式先隐藏矩形框visibility: hidden; 。
鼠标进入画布区域按下鼠标的那个点作为矩形的起点，那么问题来了，如果鼠标还没有进入画布就按下鼠标拖动怎么办？事件监听是全局的吗？

这里补充一个未经考证的知识点：
可以把鼠标事件绑定在画布区域，具体做法是获取画布dom，绑定鼠标按下mousedown事件和鼠标弹起事件mouseup，但是鼠标移动mousemove事件我们不绑定在画布元素上，为什么呢？因为我们应该把鼠标移动事件绑定在矩形框上面啊，不然矩形框画完了，只要鼠标还在画布上移动都会触发该事件造成浪费。

理清楚事件再来理一下业务：
画布一直显示，矩形框默认隐藏，当鼠标在画布区域按下时显示初始矩形框。设置矩形框的样式：

visibility: visible;

鼠标移动过程要动态设置矩形的宽高，就需要先定义变量来保存矩形的宽高，我们定义为：reactWidth 和 reactHeight。
鼠标按下的点作为矩形的起点，就是矩形相对于画布的定位点，top和left，所以还需要定义变量保存矩形的顶点位置，我们定义为：reactTop 和 reactLeft。

var reactWidth, reactHeight, reactTop, reactLeft;    // 定义矩形框的宽、高、top、left

监听鼠标移动事件的逻辑：

drawReact.onmousemove = function($event) {
      reactWidth = $event.clientX - areaInfo.x + 10; // 宽
      reactHeight = $event.clientY - areaInfo.y + 10; // 高
      drawReact.style.width = reactWidth - reactLeft + 'px'; // 宽
      drawReact.style.height = reactHeight - reactTop + 'px'; // 高
    }

这个时候已经可以看到随鼠标拖动变化大小的矩形框了，继续完善一下：

加上判断条件，只有当按下鼠标的时候才显示矩形框，并且要按住鼠标拖动才绘制矩形框，鼠标弹起就停止矩形框绘制

var drawFlag; // 定义矩形框绘制标识

增加判断，如果flag不成立，则不进行绘制

drawArear.onmousedown = function($event) {
      if (!drawFlag) {
        return;
      }
    drawFlag = true; // 鼠标按下标记开始绘制
    ...
    }

drawReact.onmousemove = function($event) {
  // 鼠标移动过程中，检查标记，不符合就return
      if (!drawFlag) {
        return;
      }
      ...
    }

drawReact.onmouseup = function($event) {
  // 鼠标按键弹起，停止绘制，修复绘制标记
      drawFlag = false;
      ...
    }

完整代码：

var drawArear = document.getElementById('drawArear'); // 获取画布元素
    var drawReact = document.getElementById('drawReact'); // 获取矩形框元素
    var areaInfo = drawArear.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置
    var reactWidth, reactHeight, reactTop, reactLeft; // 定义矩形框的宽、高、top、left
    var drawFlag; // 定义矩形框绘制标识
    var beginPoint = {}; // 标记起点
    var endPoint = {}; // 标记终点

    // 绑定鼠标事件--onmousedown 
    drawArear.onmousedown = function($event) {
      drawReact.style.width = '10px'; // 宽
      drawReact.style.height = '10px'; // 高
      if (!drawFlag) {
        return;
      }
      drawFlag = true;
      drawReact.style.visibility = 'visible'; // 进入画布按下鼠标显示默认矩形框
      // 鼠标按下的位置作为矩形框的顶点
      beginPoint = { x: $event.clientX - areaInfo.x, y: $event.clientY - areaInfo.y }
      reactTop = $event.clientY - areaInfo.y;
      reactLeft = $event.clientX - areaInfo.x;
      drawReact.style.top = reactTop + 'px';
      drawReact.style.left = reactLeft + 'px';
    }

    // 绑定鼠标事件--onmousemove 
    drawReact.onmousemove = function($event) {
      if (!drawFlag) {
        return;
      }
      // 鼠标移动的坐标 - 画布相对视窗的位置 - 矩形相对于画布的偏差（顶点位置） = 矩形框的大小
      reactWidth = $event.clientX - areaInfo.x + 10; // 宽
      reactHeight = $event.clientY - areaInfo.y + 10; // 高

      reactWidth = $event.clientX > areaInfo.right ? areaInfo.width + areaInfo.x - beginPoint.x : $event.clientX - areaInfo.x + 10;
      reactHeight = $event.clientY > areaInfo.bottom ? areaInfo.height + areaInfo.y - beginPoint.y : $event.clientY - areaInfo.y + 10;

      drawReact.style.width = reactWidth - reactLeft + 'px'; // 宽
      drawReact.style.height = reactHeight - reactTop + 'px'; // 高
    }

    // 绑定鼠标事件--onmousedown 
    document.onmouseup = function($event) {
      drawFlag = false;
      // 鼠标弹起的点作为矩形框的终点
      endPoint = { x: $event.clientX - areaInfo.x, y: $event.clientY - areaInfo.y }
    }

到此一个基本可用的画框功能就完成了。

完整代码参考 demo
[1] https://github.com/leiyt/my-blog-demo/blob/master/demo/mouseDraw.html