如果去问这样一个问题“你觉得鼠标操作简单，还是键盘操作简单”，相信会有多数人都会回答鼠标吧，毕竟键盘按钮那么多，如果手小了或者手法不规范了，太容易出问题了，也对操作的速度和有效性是大大的降低了，当然不可否认，会有那么一批人，操作起键盘来完全可以忽略鼠标的，但这些都应该是骨灰级别的了吧，起码我现在的层次还接触不到，只能向往。
然而，当面对这么一个问题时，我突然有点纠结，因为毕竟以前我也是那么想的，但是这次开发让我是大跌眼镜，键盘操作我在开发中，我只能判定其按键是否按键，然后根据不同按键进行不同响应，而到了鼠标这里的时候，虽然就那三个键，甚至有的两个（普通的鼠标，高端鼠标其它键不算），对应的事件却是绝对不少，左键、右键、长按、双击，滚轮等等等等，那哪个简单啊，原来都不简单。
先让我们来记录下鼠标的这个应用--拖拽，它的实现结构应该有哪些呢：
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
这个暂时先记住是整个文档的宽度吧
这个功能暂时还有些瑕疵，不过大体功能实现了，想放松下，回头发现问题症结了再改动吧。
今天是个周六，陪媳妇看“爸爸去哪儿”，果然还是被萌化了..
js实现鼠标拖拽div-------Day44,布布扣,bubuko.com