js拖拽效果的原理及实现

 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)
            }
        }