JS的拖拽事件

拖拽原理

实现原理：

改变元素的top值和left值 ；

拖拽的三大事件：

onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标释放

这3个事件写拖拽在PC上是需要嵌套的。

话不多说，送上2种方式的代码，如下：

第一种方法 原理

根据以上原理实现托拽的代码如下：

    obj.onmousedown = function(ev){
   
       let l = ev.pageX; //按下的坐标
       let t = ev.pageY;

        //每次按下的时候去记录元素的初始距离
       let ol = box.offsetLeft;
       let ot = box.offsetTop;

        obj.onmousemove = function(ev){
   
            //移动的坐标（ev.pageX） - 按下的坐标（l）+初始位置
            box.style.left = ol + ev.pageX - l + 'px';
            box.style.top = ot + ev.pageY - t + 'px';
        }
        
        obj.onmouseup = function(){
   
        // 当鼠标抬起的时候，把move清掉；
            box.onmousemove = null;
        }
    }

第二种 方法 原理：

第二种方法代码

 obj.onmousedown = function(ev){
   
            var ev = ev||event;
 			// 按下的坐标 - 元素的初始位置；
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.