<div class="red" id="red_box"></div>
        * {
            margin: 0;
            padding: 0;
        }

        .red {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 40%;
            left: 40%;
            background-color: red;
        }
        window.onload = function () {
            //需求:在指定位置按住鼠标左键移动对话框。
            //分析:鼠标按下,触动事件,移动在更换对话框的位置。
            //鼠标按下onmousedown   鼠标弹起:onmouseup   鼠标移动onmousemove
            //步骤:
            //1.老三步和新五步
            //2.把鼠标的坐标赋值给对话框。

            var red_box = document.getElementById("red_box");

            //1.老三步和新五步
            //先按下,在移动触动此事件
            red_box.onmousedown = function (event) {
                //获取鼠标在盒子中的坐标,将来移动的时候减去保证鼠标在盒子的指定位置
                event = event || window.event;
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;
                var x = pagex - red_box.offsetLeft;
                var y = pagey - red_box.offsetTop;

                var red_l0 = red_box.offsetLeft
                var red_t0 = red_box.offsetTop


                document.onmousemove = function (event) {
                    //2.把鼠标的坐标赋值给对话框。
                    event = event || window.event;
                    var origin_xx = event.pageX || scroll().left + event.clientX;
                    var origin_yy = event.pageY || scroll().top + event.clientY;

                    //二次操作鼠标位置  减去鼠标在盒子中的坐标
                    var xx = origin_xx - x;
                    var yy = origin_yy - y;
                    //给box赋值
                    red_box.style.left = xx + "px";
                    red_box.style.top = yy + "px";

                    //禁止文本选中(选中后取消)
                    // window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }

            //事件解绑
            red_box.onmouseup = function () {
                //解绑
                document.onmousemove = null;
            }
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.