js实现鼠标拖拽div-------Day44

如果去问这样一个问题“你觉得鼠标操作简单，还是键盘操作简单”，相信会有多数人都会回答鼠标吧，毕竟键盘按钮那么多，如果手小了或者手法不规范了，太容易出问题了，也对操作的速度和有效性是大大的降低了，当然不可否认，会有那么一批人，操作起键盘来完全可以忽略鼠标的，但这些都应该是骨灰级别的了吧，起码我现在的层次还接触不到，只能向往。

然而，当面对这么一个问题时，我突然有点纠结，因为毕竟以前我也是那么想的，但是这次开发让我是大跌眼镜，键盘操作我在开发中，我只能判定其按键是否按键，然后根据不同按键进行不同响应，而到了鼠标这里的时候，虽然就那三个键，甚至有的两个（普通的鼠标，高端鼠标其它键不算），对应的事件却是绝对不少，左键、右键、长按、双击，滚轮等等等等，那哪个简单啊，原来都不简单。

先让我们来记录下鼠标的这个应用--拖拽，它的实现结构应该有哪些呢：

1、拖拽效果的监听，这里表现出来的是左键长按并拖动鼠标；

2、拖拽结束后，鼠标按键弹起的监听，改变原始div的位置；

3、当然如果有个显示过程效果的话，最好div能够随时跟随着鼠标；

这样我们还是先附上代码：

html部分：

<div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">

然后是javascript：

var zIndex=1;//获取要移动的div对象window.onload=function(){var obj=document.getElementById("showZone");var disX=disY=0;obj.onmousedown=function(event){var event=event||window.event;disX=event.clientX-this.offsetLeft;disY=event.clientY-this.offsetTop;var move=document.createElement("div");//这个暂时有点小瑕疵，不知道哪的问题，发现后会立马改正move["id"]="road";move.style.left=this.currentStyle?this.currentStyle["left"]:getComputedStyle(this,null)["left"];move.style.top=this.currentStyle?this.currentStyle["top"]:getComputedStyle(this,null)["top"];move.style.zIndex=zIndex++;document.body.appendChild(move);document.onmousemove=function(event){//监听鼠标拖动var event=event||window.event;var nowLeft=event.clientX-disX;//这个地方是个关键，之前的disX在这里才明白是做什么用的，相对位置的活用啊var nowTop=event.clientY-disY;var maxL=document.documentElement.clientWidth-obj.offsetWidth;var maxT=document.documentElement.clientHeight-obj.offsetHeight;nowLeft<=0&&(nowLeft=0);//判断脱界了啊，不过这样写真的可以么nowTop<=0&&(nowTop=0);nowLeft>=maxL&&(nowLeft=maxL);nowTop>=maxT&&(nowTop=maxT);document.getElementById("showZone").innerHTML=nowLeft;move.style.left=nowLeft+"px";move.style.top=nowTop+"px";return false;};document.onmouseup=function(){//监听鼠标弹起document.onmousemove=null;document.onmouseup=null;obj.style.left=move.style.left;obj.style.top=move.style.top;obj.style.zIndex=move.style.zIndex;document.body.removeChild(move);obj.releaseCapture&&obj.releaseCapture();};this.setCapture&&this.setCapture();return false;};};

这样来分析下里面的几个关键点：

1、clientX

前面我们应用了styl e.left;offsetLeft,这里又出来这么一个clientX，它的意义是鼠标相对于document的距离啊，果断记忆啊。

2、currentStyle和getComputedStyle

其实这也算是浏览器间的差异，跟event一样，ie不具有getComputedStyle的方法，但是每个有style属性的元素都有currentStyle的属性，意义几乎是一样的，而getComputedStyle（）有两个参数，第一个是需要计算样式的元素，后面一个则是伪元素，如果没有伪操作的话可以为空，伪元素啊，这个还没学到呢，不过这里倒没有用到，后面碰到研究吧

3、document.documentElement.clientWidth

这个暂时先记住是整个文档的宽度吧

这个功能暂时还有些瑕疵，不过大体功能实现了，想放松下，回头发现问题症结了再改动吧。

今天是个周六，陪媳妇看“爸爸去哪儿”，果然还是被萌化了..