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

假设去问这样一个问题“你认为鼠标操作简单，还是键盘操作简单”，相信会有多数人都会回答鼠标吧，毕竟键盘button那么多，假设手小了或者手法不规范了，太easy出问题了，也对操作的速度和有效性是大大的减少了，当然不可否认，会有那么一批人，操作起键盘来全然能够忽略鼠标的，但这些都应该是骨灰级别的了吧，起码我如今的层次还接触不到，仅仅能向往。

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

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

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

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

这个功能临时还有些瑕疵，只是大体功能实现了，想放松下，回头发现问题症结了再修改吧。

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