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

川长思鸟来 2022-09-04 00:52 36阅读 0赞

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

![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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fsenp3_size_16_color_FFFFFF_t_70]: /images/20220829/20c7afd034bb4300997341d42b0a2f30.png