JS实现拖拽功能

本文代码地址（第一节）：https://github.com/dirstart/js-exam/blob/master/拖拽div1.html

第二节：https://github.com/dirstart/js-exam/blob/master/拖拽div2.html

第三节：https://github.com/dirstart/js-exam/blob/master/拖拽div3.html

本来只是想要实现鼠标放置并且一个悬浮窗的功能，结果慢慢回顾基础突然想起以前看到过的拖拽，就都需要定位来说，悬浮窗和拖拽有相似的地方。

那么，怎么实现拖拽呢，我们需要什么呢？

首先我们看功能，拖拽就是鼠标按住 => 鼠标移动 => 鼠标松开
接着我们需要什么？最后的结果是拖住的块要动，而且是跟着鼠标移动 = > 改变块的 style.top ，要注意， offsetHeight是只读的，style.top是可写的，这个是我以前踩过的坑，不过已经忘了是在哪里踩的了。因为要改变，所以我们首先要获取，因此 => 获取style的函数

http://www.cnblogs.com/jshen/archive/2012/11/29/2794292.html (关于style.top和offsetTop)

最后我们所记录下的数据： 1.物块的起始位置 2.鼠标移动的位置 3.物块最后的位置

我们能够想到的过程： a.鼠标按下，物块不动（但是告诉浏览器我们准备好了，我点着的是box） b.鼠标移动，物块动，用数组保存鼠标移动的位置 c.鼠标放下，物块不动，一波操作结束

实际上块的移动距离是鼠标mousedown点到mousemove的变动距离

大致就先这样，现在开始我们的表演。

First Blood : 获取css属性

首先证明一下，为什么不直接用DOM的参数来直接获取属性？

css部分

		*{margin: 0;padding: 0;}

		#box{

			margin-top: 240px;

			margin-left: 500px;

			width: 100px;

			height: 100px;

			background: #bfbfbf;

			cursor: move;

		}

body部分

	<div id="box"></div>

js部分

	let box=document.getElementById("box");

	// box.style.marginTop=600+"px";

	box.onmouseover=function(event){

		console.log(parseInt(box.style.marginTop));

	}

如上，最后显示的是NaN，可是我们明明在CSS中写了margin-top呀，于是我们将注释去掉，发现去掉之后显示的是600.

=> 原因在于，style.marginTop获取不了外部的样式。

链接如下： http://www.cnblogs.com/cythia/p/6721145.html

所以引出能够获取外部样式的方法 currentStyle和getComputedStyle.之后，因为IE支持前者，FF和Chrome支持后者。

let oStyle=this.currentStyle?this.currentStyle:window.getComputedStyle(this,null);

	box.onmouseover=function(event){

		let oStyle=this.currentStyle?this.currentStyle:window.getComputedStyle(this,null);

		console.log(parseInt(box.style.marginTop));  // NaN

		console.log(oStyle.height);					// 100px

	}

发现可用，之后进入我们的第二步。

Second , 获取鼠标的动态并根据此改变我们的块已达到拖拽的目的

let event=event||window.event; 通过此句获得当前鼠标的地址，这样的赋值依旧是为了处理兼容性问题。

！！！！！！！！！！！！很幸运，我们见到了一个新坑，这里报错了

报错信息：Uncaught SyntaxError: Identifier 'event' has already been declared

这个错误应该是跟let有关，在这里用以前的var就不会出错。

在这里我先扔出大概的原理链接，因为我也不是很懂==，let x=x这样是会报错的：

https://www.zhihu.com/question/62966713/answer/204279809

那么我们先用回 var event=event||window.event，继续我们的旅程。

	let box=document.getElementById("box");

	let disX=disY=0;

	let startX=startY=0;

	let flag=false;

	box.onmousedown=function(event){

		var event=event||window.event;

		// 阻止事件冒泡

		if(event && event.stopPropagation){

			event.stopPropagation();

		}else{

			window.event.cancelBubble=true;

		}

		// 记录下mousedown点的距离

		flag=true;

		startX=event.clientX;

		startY=event.clientY;

		console.log("down");

	}

	box.onmousemove=function(event){

		if(flag===false) return ;

		let oStyle=this.currentStyle?this.currentStyle:window.getComputedStyle(this,null);

		disX=event.clientX-startX;

		disY=event.clientY-startY;

		box.style.marginLeft=parseInt(oStyle.marginLeft)+disX+"px";

		box.style.marginTop=parseInt(oStyle.marginTop)+disY+"px";

	}

	document.onmouseup=function(){

		flag=false;

	}

我们发现能够移动，但是非常卡顿，很不平滑，完全不像每次计算鼠标变动距离的样子。

问题已发现：少了一句话。我们需要在 onmousemove 再加一句话，因为我们的startX始终没有改变，而实际上每一次的移动都应该改变我们上一次的起始点。

	box.onmousemove=function(event){

                       ............................................

		startX=event.clientX;

		startY=event.clientY;

	}

加上我们的基本功能就算完成了。

但是还有个问题，当我们的鼠标移出了box的范围后，因为我们使用的是 box.onmousemove ，我们鼠标到了document就不行了。

这又是我们的思维漏洞，不过改倒是非常容易

将box.onmousemove改成'document.onmousemove，将里面的三个 this改成box` 即可。

第一版代码地址：https://github.com/dirstart/js-exam/blob/master/拖拽div1.html

那么这样我们的第二阶段就OK了，我们先看看网上其他的例子。

现在能想到的优化：1.样式可以更好看 2.可以给提示和信息 3.不让div移出浏览器框外。

看完fgm.cc里面的拖拽之后的

首先记录下过程中可能要看的知识点：http://blog.csdn.net/u012309349/article/details/50663841

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{margin: 0;padding: 0;}

		ul,li{

			list-style: none;

		}

		#box{

			cursor: move;

			position: absolute;

			top: 50%;

			left : 50%;

			width: 300px;

			height: 150px;

			margin: -75px 0 0 -150px;

			background: #C0E4DF;

			border: 1px solid #3E2D2D;

		}

		html{

			font-size: 12px;

			background: #F0ADAD;

		}

		.header{

			border-bottom: 1px solid #3E2D2D;

			height: 40px;

			line-height: 40px;

			font-size: 16px;

			text-align: center;

			color: #8C1F1F;

		}

	</style>

</head>

<body>

	<div id="box">

		<p class="header">我是被拖拽的小窗口</p>

		<p>拖拽是否开启</p><span></span>

		<ul>

			<li>位置X : <span id="displayX"></span></li>

			<li>位置Y : <span id="displayY"></span></li>

		</ul>

	</div>

</body>

<script type="text/javascript">

	let oBox=document.getElementById("box"),

		oX=document.getElementById('displayX'),

		oY=document.getElementById('displayY'),

		isDrag=false,

		temX=0,

		temY=0,

		disX=0,

		disY=0;

	oBox.onmousedown=(event)=>{

		var event=event||window.event;

		isDrag=true;

		temX=event.clientX;

		temY=event.clientY;

		disX=temX-oBox.offsetLeft;

		disY=temY-oBox.offsetTop;

		this.setCapture && this.setCapture();

		return false;

	}

	document.onmousemove=(event)=>{

		if(!isDrag) return ;

		var event=event||window.event;

		temX=event.clientX-disX;

		temY=event.clientY-disY;

		oBox.style.left=temX+"px";

		oBox.style.top=temY+"px";

		// oBox.style.marginTop = oBox.style.marginLeft = 0;

	}

	document.onmouseup=(event)=>{

		isDrag=false;

	}

</script>

</html>

这是根据fgm.cc网站修改的部分，我们重点关注一下注释中的// oBox.style.marginTop = oBox.style.marginLeft = 0;，这里有个问题，如果不加这句话的话鼠标不会保持在我们第一次放下的oBox内的位置。

其实原因是这个样子的，因为我们初始的时候为了让元素居中，所以我们用了 top:50%;left:50%; margin-left: #（负一半的元素宽度） ; margin-top: #（负一半的元素高度）

上面的目的是为了居中，而此后，因为我们直接通过 offsetLeft和offsetTop来设定了位置，这个时候的margin-left和margin-top如果不清楚，就会造成 ---- box盒子往左上偏。

可以这样理解。我们这个时候已经不用 top 和 left 的绝对定位了，而我们派出去生物天敌 margin却还在起着它的作用，这就像当年的罗斯福与破坏生物的故事了。

So，我们得加上那句注释掉的话。

接下来的任务是怎么让盒子不移出我们的视线之外。

其实照网上的这种写法，要直接限定盒子简直是太容易了，不得不承认别人的逻辑比我的好上太多了。代码如下：

	document.onmousemove=(event)=>{

		if(!isDrag) return ;

		var event=event||window.event;

		temX=event.clientX-disX;

		temY=event.clientY-disY;

		oBox.style.marginTop = oBox.style.marginLeft = 0;

		console.log(temX);

		// 做判断

		temX=temX<0?0:temX;

		temX=temX>maxX?maxX:temX;

		temY=temY<0?0:temY;

		temY=temY>maxY?maxY:temY;

		oBox.style.left=temX+"px";

		oBox.style.top=temY+"px";

		oBox.style.marginTop = oBox.style.marginLeft = 0;

	}

至于如何来美化它，这里就不再阐述了，不过之后再来介绍一种用其他思路来实现的代码。

Third 第三种方法的实现

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{margin: 0;padding: 0;}

		body{

			background: #6A3545;

		}

		#box{

			position: absolute;

			left: 500px;

			top: 300px;

			width: 100px;

			height: 100px;

			border: 1px solid #fde331;

			background: #1A5F5C;

			cursor: move;

		}

		#temp{

			position: absolute;

			width: 100px;

			height: 100px;

			background: #bfb171;

			opacity: 0.6;

		}

	</style>

</head>

<body>

	<div id="box">

	</div>

</body>

<script type="text/javascript">

	var zIndex=1;

	var oBox=document.getElementById('box');

	function getStyle(ele,attr){

		return ele.currentStyle?ele.currentStyle[attr]:getComputedStyle(ele,null)[attr];

	}

	oBox.onmousedown=function(event){

		var event=event||window.event;

		var disX=event.clientX-oBox.offsetLeft;

		var disY=event.clientY-oBox.offsetTop;

		var maxLeft=document.documentElement.clientWidth - oBox.offsetWidth;

		var maxTop=document.documentElement.clientHeight - oBox.offsetHeight;

		var oTemp=document.createElement("div");

		oTemp["id"]="temp";

		oTemp.style.left=getStyle(oBox,"left");

		oTemp.style.top=getStyle(oBox,"top");

		oTemp.style.zIndex=zIndex++;

		document.body.appendChild(oTemp);

		document.onmousemove=function(event){

			var event=event||window.event;

			var temX=event.clientX-disX;

			var temY=event.clientY-disY;

			temX=temX>maxLeft?maxLeft:temX;

			temX=temX<0?0:temX;

			temY=temY>maxTop?maxTop:temY;

			temY=temY<0?0:temY;

			oTemp.style.left=temX+"px";

			oTemp.style.top=temY+"px";

			return false;

		}

		document.onmouseup=function(){

			document.onmousemove=null;

			document.onmouseup=null;

			oBox.style.left=oTemp.style.left;

			oBox.style.top=oTemp.style.top;

			document.body.removeChild(oTemp);

		}

		return false;

	}

</script>

</html>

考虑到用户交互的移动，这往往是我们真正会做到的东西.