JavaScript鼠标拖动绘制方框实现选区

最新推荐文章于 2024-09-29 09:32:38 发布

此困玉Q

最新推荐文章于 2024-09-29 09:32:38 发布

阅读量6.3k

点赞数 7

分类专栏： JS 文章标签：前端 JavaScript 绘制选区

本文链接：https://blog.csdn.net/qq_33745954/article/details/81283252

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习编程，与君共勉。
针对JavaScript拖动鼠标绘制方框实现选区的方法，在网上查了很多，但感觉不是写的很繁琐就是感觉很乱，没有一个详细的步骤，这对于我们这些菜鸟来说真的很难理解，所以我写了一份比较简洁，注释详细的代码供大家参考。
先把代码放上来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;position: relative;}
        #box div{border: 1px solid green;position: absolute;}
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            //鼠标按下，获取初始点
            oBox.onmousedown = function (ev) {
               ev = window.event || ev;
                //1.获取按下的点
               var x1 = ev.clientX - oBox.offsetLeft;
               var y1 = ev.clientY - oBox.offsetTop;
                //2.创建div
               var oDiv = document.createElement("div");
               oBox.appendChild(oDiv);
               oBox.onmousemove = function (ev) {
                   ev = window.event || ev;
                   var x2 = ev.clientX - oBox.offsetLeft;
                   var y2 = ev.clientY - oBox.offsetTop;
                   //3.设置div的样式
                   oDiv.style.left = (x2 > x1 ? x1 : x2) +"px"; 
                   oDiv.style.top = (y2 > y1 ? y1 : y2) +"px";
                   oDiv.style.width = Math.abs(x2-x1)+"px";
                   oDiv.style.height =Math.abs(y2-y1)+"px";
               }
               return false;  //解除在划动过程中鼠标样式改变的BUG
           }
           //在鼠标抬起后终止onmousemove事件
           document.onmouseup = function () {
               oBox.onmousemove = null;
           }
        }
    </script>
</head>
<body>
<div id="box"></div>
</body>
</html>

现在开始对代码进行解释：在写代码之前，我们一定要想清楚自己想要干什么，比如说这里，我们的目的是绘制方框；然后下一步我们就要考虑怎么实现，在这里我用一段代码表示：

    var oDiv = document.createElement("div");  //创建div
            oBox.appendChild(oDiv);     //加入到父元素
            oDiv.style.left = "100px";    //设置坐标以及宽高
            oDiv.style.top = "100px";    
            oDiv.style.width = "100px";
            oDiv.style.height = "100px";

也就是说我们的最终目的是通过鼠标拖动创建div，然后将它放到父元素中显示，最后设置它的位置和宽高，这样就可以实现目的。
代码中已经有详细的注释，这里就不做赘述，我这里特意说明一下在设置div样式时，加入了反向绘制方块，三目运算符的功能是判断绘制方块的方向，如果 x2>x1,则说明是从上向下绘制，反之从下至上；而Math.abs()则是取绝对值，如果从下往上的话x2小于x1，这里就获取不了宽高。
当然，如果有对client，offset及scroll有疑问的话，建议先去参考下BOM教程。
送给诸位，也是送给自己的一句话:Learn No Stop Forever !