Web-js：实现拖动对话框（模态框）-蒲公英云

Web-js：实现拖动对话框（模态框）

实现点击按住蓝色区域移动鼠标实现拖动整个区域，松开时固定在当前位置：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动模态框</title>
    <style>
        div.modal {
            background-color: hotpink;
            width: 300px;
            height: 300px;
            position: relative;
        }
        div.header{
            height: 50px;
            width: 100%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="modal">
        <div class="header"></div>
    </div>
    <script>
        var eleHeader = document.querySelector('.header');
        var eleModal = document.querySelector('.modal');
        //鼠标按下事件
        eleHeader.addEventListener('mousedown',function(e){
            //方法一
            //offsetLeft/Top可以得到元素的偏移位置返回的不带单位的数值
            //以带有定位的父亲为准,如果没有父亲或者父亲没有定位则以body为准
            var fixX = e.pageX - eleModal.offsetLeft;
            var fixY = e.pageY - eleModal.offsetTop;
            //方法二
            // offsetX/Y 规定了事件对象与目标节点的内填充边（padding edge）在 X/Y 轴方向上的偏移量。
            //新属性，老版本浏览器不兼容
            // var fixX = e.offsetX;
            // var fixY = e.offsetY;
            //鼠标移动事件
            document.addEventListener('mousemove', move)
            function move(e){
                //  clientX/Y相对于视口
                //  pageX/Y相对于整个页面
                //  screenX/Y相对于电脑屏幕
                eleModal.style.left = e.pageX - fixX +'px';
                eleModal.style.top = e.pageY - fixY +'px';
            }
            //鼠标弹起事件
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move)
            })
        })
    </script>
</body>
</html>