学习编程，与君共勉。
针对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.创建divvar 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"); //创建divoBox.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 !
