CSS

.dragWindow{
min-width:300px;
min-height: 240px;
position: absolute;
z-index: 9999;
}

HTML

<div class="dragWindow" style="width: 320px">
    可拖动窗口
</div>

JS

(function($){
window.dwInit = function (){
    $.dw = document.querySelector('.dragWindow');
    if(!$.dw){
        console.log('drag-window 未启用');
        return;
    }
    console.log('drag-window 已启用');
    //判断鼠标是否按下
    $.p = false;
    //鼠标按下处在页面中的水平偏移
    $.dx = 0;
    //鼠标按下处在页面中的垂直偏移
    $.dy = 0;
    //div在页面中的水平偏移
    $.sx = 0;
    //div在页面中的垂直偏移
    $.sy = 0;

    //鼠标按下时
    $.dw.onmousedown = function(e){
        if (!$.p) {
            $.p = true;
        }
        //处理兼容性和滚动条
        let event = e || window.event;
        let scrollLeft = document.documentElement.scrollLeft;
        let scrollTop = document.documentElement.scrollTop;
        let pageX = event.pageX || event.clientX + scrollLeft;
        let pageY = event.pageY || event.clientY + scrollTop;
        $.dx = pageX;
        $.dy = pageY;
        $.sx = $.dw.offsetLeft;
        $.sy = $.dw.offsetTop;
    }

    //鼠标移动时
    document.onmousemove = function(e){
        if ($.p) {
            let event = e || window.event;
            let scrollLeft = document.documentElement.scrollLeft;
            let scrollTop = document.documentElement.scrollTop;
            let pageX = event.pageX || event.clientX + scrollLeft;
            let pageY = event.pageY || event.clientY + scrollTop;
            $.dw.style.left = pageX - ($.dx - $.sx) + 'px';
            $.dw.style.top = pageY - ($.dy - $.sy) + 'px';
        }
    }

    //鼠标松开时
    document.onmouseup = function(){
        if ($.p) {
            $.p = false;
        }
    }
    window.dragWindow = $;
}

})({})

初始化

initDw(){
            let si = setInterval(function(){
                if (window.dwInit) {
                    clearInterval(si);
                    dwInit();
                }
            })
        }