js拖拽事件

js的拖拽

首先，在了解拖拽的原理之前，我们需要认识几个知识点（BOM三大系列），获取鼠标的位置，获取元素的位置

offset系列：获取元素的占位宽高(content + padding + border)

名称	解释
offsetWidth	获取元素的宽度，使用语法 : 标签.offsetWidth
offsetHeight	获取元素的高度，使用语法 : 标签.offsetWidth
offsetTop	获取当前元素的顶部到定为父元素的距离，没有定位父元素到body的距离
offsetLeft	获取当前元素的左边到定为父元素的距离，没有定位父元素到body的距离

client 可视系列（content + padding）

名称	用法
clientWidth	获取可视化宽度，就是能够直观看到的元素的宽度 （包括元素的自身content + padding）不包括border 语法：元素.clientWidth
clientHeight	获取可视化高度，就是能够直观看到的元素的高度度 （包括元素的自身content + padding）不包括border 语法：元素.clientHeight
获取屏幕的可视化宽度	document.documentElment.clientWidth
获取屏幕的可视化高度	document.documentElment.clientHeight
clientTop	获取元素的上边框
clientLeft	获取元素的下边框

scroll 滚动系列

名称	用法
scrollWidth	获取元素实际内容宽度 元素.scrollWidth
scrollHeight	获取元素实际内容高度 元素.scrollHeight
scrollLeft	获取元素被卷去的宽度 元素.scrollLeft
scrollTop	获取元素被卷去的高度 元素.scrollTop
获取页面的滚动距离	document.docuementElement.scrollTop || document.body.scrollTop

2.在做元素拖拽之前，需要知道几个事件，分别是 鼠标按下（onmousedown）、鼠标移动（onmousemove）、鼠标松开（onmouseup）

下面过程可能繁琐，但是要耐心观看哟！
我们知道给一个元素添加多个事件，在不采用事件绑定的情况下，事件函数是会被覆盖的，所以我们使用普通事件处理函数时，不给同元素添加事件，下面进行分析

鼠标按下那一刻，我们需要获取鼠标的位置，然后移动鼠标时改变元素的top和left值，

var wrap = document.getElementsByTagName("div")[0];
			wrap.onmousedown=function(event)
			{
				document.onmousemove=function(event)
				{
					var ev = window.event || event  //兼容写法兼容火狐早期事件对象
					var cx = ev.clientX;   //水平鼠标位置
					var cy = ev.clientY;    //数值鼠标位置
					wrap.style.top = cy + "px";
					wrap.style.left = cx + "px"
				}
			}
			document.onmouseup=function()
			{
				document.onmousemove = null;    //鼠标松开取消移动时候的效果
			}

当移动的时候，把鼠标的位置，给到元素的left和top值。但是会有一个问题，点击元素会出现元素变动的问题。可以看一下，这一问题。

分析出现这一情况的问题。
>按照上面的问题进行修改后

var wrap = document.getElementsByTagName("div")[0];
			wrap.onmousedown=function(event)
			{
				var ev = window.event || event;
				var cx = ev.clientX;   //水平鼠标位置
				var cy = ev.clientY;    //数值鼠标位置
				var oh = cy - wrap.offsetTop;
				var ol = cx - wrap.offsetLeft;
				
				document.onmousemove=function(event)
				{
					var ev = window.event || event  //兼容写法兼容火狐早期事件对象
					var cx = ev.clientX;   //水平鼠标位置
					var cy = ev.clientY;    //数值鼠标位置
					wrap.style.top = cy  - oh+ "px";
					wrap.style.left = cx  - ol+ "px"
				}
			}
			document.onmouseup=function()
			{
				document.onmousemove = null;    //鼠标松开取消移动时候的效果
			}

最终效果