js实现页面元素的拖拽

平时在我们页面上，经常会悬浮着一些功能按钮，如帮助，联系客服等，按钮的显示比较简单，用定位悬浮在自己需要的位置上就行，比如下面的页面上我们展示一个帮助的按钮，用户点击后可以展示一些帮助的信息：

 代码：

	
		
		
		
		
		
	
	
		
帮助
	

但是这样定位一般是固定在这个位置，如果这时候刚好【帮助按钮】挡住了这个位置原本有的其他操作按钮，那么我们就需要能够把【帮助按钮】拖开，不影响原本页面上的操作。

一般实现拖动的思路是：在【帮助按钮】上鼠标按下时，记录下当前的坐标，以及原本相对于父元素的位置，然后监听【帮助按钮】的鼠标移动事件【onmousemove】，然后取现在的坐标，计算出两轴上移动的距离，用原本的位置减去移动的位置得到现在的位置，再重新设置给【帮助按钮】即可。最后在【帮助按钮】鼠标抬起事件【onmouseup】上注销对鼠标移动的监听即可。

代码：

至此可以实现拖动【帮助按钮】移动位置。但是会出现以下几个问题：

问题1：移动过快，鼠标超过【帮助按钮】的范围，会导致鼠标抬起事件失效，造成移动卡顿；

解决方法，将鼠标移动事件和鼠标抬起事件挂载在document上。

代码：

问题2：鼠标移动过快，可能会选中“帮助”文字，这时候会造成鼠标抬起事件失效。出现移动bug。

解决方法：在移动时禁用文字选中。鼠标抬起时还原

代码：

问题3：会移动到屏幕外面去。

解决方法：限制范围不超过页面区域（或者你自定义父容器的内容范围）。

代码：

问题4：拖动的时候也会触发【帮助按钮】的点击事件。

解决方法：在鼠标按下时，记录当前时间，在鼠标抬起时再记录一次时间。在点击事件方法中对两个时间差值进行判断，此处我设定是100，可根据自己需求调整。大于这个时间间隔则为拖拽，不继续执行点击的方法。

代码：

到这里为止在单页面上可以实现元素的拖动。但是如果页面上还存在iframe窗口，当鼠标经过iframe窗口的时候，会出现拖拽卡顿，鼠标抬起事件失效的问题。

解决思路，在鼠标点击的时候在页面上加上一个蒙层，把蒙层作为父元素进行监听。鼠标移除的时候，去除蒙层。

完整代码：

	
		
		
		
		
		
	
	
		
		


		
帮助