JavaScript 拖拽效果实现原理与代码解析

document.addEventListener(“mousemove”, moving, false)

document.addEventListener(“mouseup”,function() {
document.removeEventListener(“mousemove”, moving, false);
}, false);

//极简单版
   var div=document.querySelector("div");
    // 按下时开始监听在文档中鼠标移动的事件
    // 开始监听鼠标松开键的事件
    // 只有按下时才准备拖拽
    div.onmousedown=function(e1){
        // 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
        div.onmousemove=function(e){
            // 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
            // 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
            // 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
            div.style.left=e.clientX-e1.offsetX+"px";
            div.style.top=e.clientY-e1.offsetY+"px";
        }
        // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
        div.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

//简单版
    var div=document.querySelector("div");
    var offsetX,offsetY;
    div.addEventListener("mousedown",mouseDownHandler);

    function mouseDownHandler(e){
        offsetX=e.offsetX
        offsetY=e.offsetY
        document.addEventListener("mousemove",mousemoveHandler)
        document.addEventListener("mouseup",mouseupHandler)
    }

    function mousemoveHandler(e){
        div.style.left=e.clientX-offsetX+"px"
        div.style.top=e.clientY-offsetY+"px"
    }

    function mouseupHandler(e){
        document.removeEventListener("mousemove",mousemoveHandler)
        document.removeEventListener("mouseup",mouseupHandler)
    }

// 简单升级版
    var div=document.querySelector("div");
    var offsetX,offsetY;
    div.addEventListener("mousedown",mouseHandler);

    function mouseHandler(e){
        if(e.type==="mousedown"){
            offsetX=e.offsetX;
            offsetY=e.offsetY;
            document.addEventListener("mousemove",mouseHandler)
            document.addEventListener("mouseup",mouseHandler)
        }else if(e.type==="mousemove"){
            div.style.left=e.clientX-offsetX+"px"
            div.style.top=e.clientY-offsetY+"px"
        }else if(e.type==="mouseup"){
            document.removeEventListener("mousemove",mouseHandler)
            document.removeEventListener("mouseup",mouseHandler)
        }
}