乐趣区

关于javascript:可拖动弹窗原生js实现code

jiezi

复制代码，可间接运行查看成果，关键处已正文阐明，心愿对你有所帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 可拖动弹窗 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style>
        body {background: #f5f5f5; font-size: 14px; color: #333;}
        .dialog_btn_wrap {padding: 100px; text-align: center;}
        #mask {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,.4); display: none;
            -moz-user-select: none; -webkit-user-select: none;}
        #dialog {position: absolute; width: 250px; height: 200px; top: 0; left: 0; border-radius: 10px; z-index: 2; background: #fff; display: none;
            -moz-user-select: none; -webkit-user-select: none;}
        .dialog_head {text-align: center; line-height: 50px; background-color: #ddd; cursor: move;}
        .dialog-body {height: 100px;}
        .dialog-foot {height: 50px; text-align: center; line-height: 50px; background-color: #ddd;}
    </style>
</head>
<body>

<div class="dialog_btn_wrap">
    <a class="btn btn-lg btn-primary" id="dialog_btn"> 弹窗 </a>
</div>

<!-- 蒙层 -->
<div id="mask"></div>

<!-- 弹窗 -->
<div id="dialog">
    <div class="dialog_head" id="move_part"> 可拖拽区域 </div>
    <div class="dialog-body"></div>
    <div class="dialog-foot">
        <a class="btn btn-default" id="dialog_close"> 敞开 </a>
    </div>
</div>

<script>
    //g() 函数用于获取 dom 对象
    function g(id) {return document.getElementById(id);
    }

    // 点击弹出弹窗
    g('dialog_btn').onclick = function () {g('mask').style.display = 'block';
        g('dialog').style.display = 'block';
        autoCenter(g('dialog'));
    }

    // 点击敞开弹窗
    g('dialog_close').onclick = function () {g('mask').style.display = 'none';
        g('dialog').style.display = 'none';
    }
    
    // 弹窗主动居中
    function autoCenter(el) {
        // 获取窗口宽高
        var windowW = document.documentElement.clientWidth;
        var windowH = document.documentElement.clientHeight;

        // 获取弹窗宽高
        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (windowW-elW)/2 + 'px';
        el.style.top = (windowH-elH)/2 + 'px';
    }

    // 禁止选中弹窗内容
    //document.attachEvent IE 浏览器监听事件，拖拽时禁止选中，firefox、chrome 通过 css -moz-user-select: none; -webkit-user-select: none; 设置
    if(document.attachEvent) {g('dialog').attachEvent('onselectstart', function () {return false;})
    }

    // 扭转窗口大小，弹窗主动居中
    window.onresize = function () {autoCenter(g('dialog'));
    }

    // 拖拽实现原理
    //1. 鼠标点击时，设置弹窗可拖动，记录鼠标初试地位
    //2. 鼠标拖动时，依据鼠标新地位更新弹窗地位
    //3. 鼠标来到时，设置弹窗不可拖动
    //4. 限度弹窗拖拽范畴

    var mx = 0; // 鼠标 x,y 轴坐标 (绝对于 left top)
    var my = 0;

    var dx = 0; // 弹窗 x,y 轴坐标
    var dy = 0;

    var isDraging = false; // 弹窗不可拖动

    // 鼠标点击
    g('move_part').addEventListener('mousedown', function (e) {
        var e = e || window.event; // 兼容写法，window.event 为 IE 浏览器独有对象
        mx = e.pageX; // 点击时鼠标 X 坐标
        my = e.pageY; // 点击时鼠标 Y 坐标
        dx = g('dialog').offsetLeft; // 弹窗距页面左侧间隔
        dy = g('dialog').offsetTop; // 弹窗距页面顶部间隔
        isDraging = true; // 标记弹窗可拖动
    })

    // 鼠标拖动
    // 当鼠标在以后对象上挪动时就产生了 onmousemove 事件
    document.onmousemove = function (e) {
        var e = e || window.event;
        var x = e.pageX; // 挪动时鼠标 X 坐标
        var y = e.pageY; // 挪动时鼠标 X 坐标
        if(isDraging) {
            var moveX = x - mx + dx; // 位移值 + 弹窗 left 值 = 挪动后弹窗 left 值
            var moveY = y - my + dy; // 挪动后弹窗 top 值

            // 限度弹窗拖拽范畴
            // 页面宽高
            var pageW = document.documentElement.clientWidth;
            var pageH = document.documentElement.clientHeight;
            // 弹窗宽高
            var dialogW = g('dialog').offsetWidth;
            var dialogH = g('dialog').offsetHeight;
            var maxX = pageW - dialogW; // x 轴可拖动最大值
            var maxY = pageH - dialogH; // x 轴可拖动最大值
            //Math.min()  Math.max() 妙用
            moveX = Math.min(Math.max(0, moveX), maxX); // 设定 left 范畴, 0-maxX
            moveY = Math.min(Math.max(0, moveY), maxY); // 设定 top 范畴, 0-maxY
            // 从新设置弹窗地位
            g('dialog').style.left = moveX + 'px';
            g('dialog').style.top = moveY + 'px';
        }
    }

    // 鼠标来到
    g('move_part').addEventListener('mouseup', function () {isDraging = false;})

</script>
</body>
</html>
退出移动版