The principle and implementation of js drag effect

document.addEventListener("mousemove", moving, false)

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

//Extremely simple version var div = document.querySelector("div");
    // Start listening for mouse movement events in the document when pressed // Start listening for mouse release events // Only prepare to drag when pressed div.onmousedown=function(e1){
        // When the mouse moves in the document, it cannot move on the div, because the mouse may leave the div, making it impossible to drag the div.onmousemove=function(e){
            // When the mouse moves, assign the current mouse coordinates relative to the viewport to the left and top of the element
            // Because we need to drag at the pressed position, we also need to get the upper left corner position of the mouse relative to the div when the key is pressed. // Use the current mouse position minus the upper left corner position of the relative element to ensure that the mouse is dragged at the pressed position. div.style.left=e.clientX-e1.offsetX+"px";
            div.style.top=e.clientY-e1.offsetY+"px";
        }
        // When the mouse button is released, delete the mouse move event and delete the mouse release event div.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

//Simple version 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)
    }

// Simple upgraded version 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)
        }
}