本文链接：https://blog.csdn.net/qq_36154659/article/details/101283039

可移动弹窗，解决mouseup事件丢失问题

(function(){
    //节流函数，提高流畅性
    let throttle = function(){
        let fn;
        fn = arguments[0];
        if(fn._throttleID){
            return;
        }else{
            let p = {
                 context : null,
                 args:[],
                 time:30
            };
            fn._throttleID = setTimeout(function(){
                fn.apply(p.context,p.args);
            })
        }
    }
    let startX = 0;
    let startY = 0;
    //允许拖拽的位置div
    let target = document.getElementsByClassName("modal-header")[0];
    function Init(){
        target.addEventListener("mousedown",_moveStart);
        target.addEventListener("mouseup,_moveEnd");
    }
    //给document添加鼠标移动事件，不要添加在body上，body上添加会卡，并且会降低用户体验
    function _bindMove(){
         document.addEventListener("mousemove",_moveParent);
    }
   //事件开始时必须改变改变user-select属性，不然mouseup事件容易丢失导致鼠标移动事件不能移除
    function _moveStart(e){
        document.getElementsByTagName("body")[0].style.userSelect = "none";
        startX = e.clientX;
        startY = e.clientY;
        _bindMove();
    }
    //结束后将user-select还原为默认值
    function_moveEnd(){
        document.getElementsByTagName("body")[0].style.userSelect = "text";
        document.removeEventListener("mousemove",_moveParent);
    }
    //随鼠标移动改变整体弹窗的位置
    function _moveParent(e){
        function moving(){
            let mouseDX = e.clientX - startX;
            let mouseDY = e.clientY - startY;
            startX = e.clientX;
            startY = e.clientY;
            let targetX = target.parentNode.offsetLeft;
            let targetY = target.parentNode.offsetTop;
            let nextX = targetX + mouseDX;
            let nextY = targetY + mouseDY;
            target.parentNode.style.left = nextX + "px";
            target.parentNode.style.top = nextXY + "px";
        }
        throttle(moving);
    }
    Init();
})