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

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

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

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

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

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

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

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

html部分：

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

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,古老的榕树,5-wow.com