关于拖拽

一直觉得拖拽能与用户互动，像我们平常的拖动排序、弹出框拖动移动等用户自定义的动作都是拖拽实现的，它是一个比较有意思的角儿，今天我好好总结了一下下。
拖拽动作：按下、移动、松开
1、鼠标按下

obj.onmousedown = function(e){

}

2、鼠标移动

obj.onmousemove = function(e){

}

3、鼠标松开

obj.onmouseup = function(e){
    
    }      

原理：这里我找到一个图片很形象，我决定bia给大家看看，主要就是鼠标移动的坐标和元素坐标之间的关系～

移动后元素的X坐标＝鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标 
移动后元素的Y坐标＝鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标

说白了就是求元素移动的坐标：

这里的中心是鼠标［见方法一］
元素移动后的x、y坐标＝鼠标移动后按下的偏移量＋元素的初始坐标
也可以这样，原理是相通的：这里的中心是元素［见方法二］
元素移动后的x、y坐标＝鼠标移动后的x、y坐标－（鼠标按下的xy坐标－元素初始坐标）

 *注意：元素拖拽得定位一下，才能脱离文档流*    推荐法二

方法一：

var mouseDownX,mouseDownY,initX,initY,flag = false;  
obj.onmousedown = function(e) {  
    //鼠标按下时的鼠标所在的X，Y坐标  
    mouseDownX = e.pageX;  
    mouseDownY = e.pageY;  
  
    //初始位置的X，Y 坐标  
    initX = obj.offsetLeft;  
    initY = obj.offsetTop;  
  
    //表示鼠标已按下  
    flag = true;  
}  
document.onmousemove = function(e) {  
    // 确保鼠标已按下  
    if(flag) {  
        var mouseMoveX = e.pageX,mouseMoveY = e.pageY;  
        this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";  
        this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";  
    }  
      
}  
document.onmouseup = function() {  
    //标识已松开鼠标  
    flag = false;  
}     

方法二：

oDiv.onmousedown=function(ev){    
               var x=ev.pageX-oDiv.offsetLeft;
               var y=ev.pageY-oDiv.offsetTop;
               document.onmousemove=function(ev){
                   var l=ev.pageX-x;
                   var t=ev.pageY-y;
                   oDiv.style.left=l+'px';
                   oDiv.style.top=t+'px';
               }
               document.onmouseup=function () {
                   document.onmousemove=null;
                   document.onmouseup=null;
               }
           }
           
           
           

移动端不是mousedown、mousemove和mouseup

相应的应是touchstart、touchmove和touchend