拖拽原理以及代码实现

拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等；挺好玩儿，和码友们一起学习！理解有误或者有更好的建议请提出来哦

下面分享一下拖拽的原理

拖拽流程：

1）事件：onmousedown；onmousemove；onmouseup；

2）实现原理分析：

拖拽是通过获取鼠标移动的距离来实现的，即计算移动前的位置的坐标（x，y）与移动中的位置的坐标（x，y）差值。
当onmousedown或onmousemove时，都可以获取到当前鼠标的位置，即移动前的坐标值与移动中的坐标值。
参考如下图：

如上图所示：

在onmousemove中元素的left值为 ： 鼠标移动后的left值 - 鼠标按下的left值 + 元素的初始left值；
　　　　　　 top值为 ： 鼠标移动后的top值 - 鼠标按下的top值 + 元素的初始top值；

需要注意：onmousemove；onmouseup事件要在onmousedown事件内；

代码如下：

 function drag(id,Range){
 var _this=this;
 if (Range==void(0))Range=document;
 var obox=document.getElementById(id);
 obox.onmousedown=function(e){
 fndown(e,this,Range);
 //兼容IE事件捕获点下之后进行获取事件；setcapture事件捕获和releaseCapture释放事件捕获要成对出现使用；用于解决IE不能阻止默认事件问题；
 //当进行拖拽的时候图片也会有默认事件；用同样的方法进行阻止默认事件；
 if (this.setcapture) {
 this.setcapture()
 }
 return false;
 
 
 }
 },
 
 /*******************************
 当鼠标按下后obj的left和top值设置为鼠标的X轴和Y轴；
 当进行拖动时设置元素的left值和top值实现拖拽
 
 ************************************************/
 function  fndown(e,obj,Range){
 if(Range!=document) Range=document.getElementById(Range);
 var e=e||window.event;
 this.ledt=e.clientX-obj.offsetLeft;
 this.ledr=e.clientY-obj.offsetTop;
 Range.onmousemove=function(e){
 var rangeW=Range==document?document.documentElement.clientWidth:fan.offsetWidth;
 var rangeH=Range==document?document.documentElement.clientHeight:fan.offsetHeight
 var e=e||window.event;
 var ollL=e.clientX-this.ledt;
 var ollR=e.clientY-this.ledt;
 if(ollL<0)ollL=0;
 if(ollL>rangeW-obj.offsetWidth){
 ollL=parseInt(rangeW-obj.offsetWidth);
 }
if(ollR<0)ollR=0;
 if(ollR>rangeH-obj.offsetHeight){
 ollR=parseInt(rangeH-obj.offsetHeight);
 }
 obj.style.left=ollL+'px';
 obj.style.top=ollR+'px';
 }.bind(this);
 Range.onmouseup=function(){
 this.onmousemove=this.onmouseup=null;
 
 //当鼠标抬起之后释放事件捕获
 if (obj.releaseCapture) {
 obj.releaseCapture()
 }

};
 }