117可拖拽弹窗

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .outerBox {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #bbb;
        }

        #middleBox {
            position: absolute;
            background: #ddd;
            margin: auto;
            cursor: pointer;
            width: 300px;
            height: 300px;
            left: calc(50% - 150px);
            top: calc(50% - 150px);
            user-select: none;
            text-align: center;
        }

        p {
            line-height: 70px;
        }
    </style>
</head>

<body class="outerBox">
    <div id="middleBox">
        <div>
            <p> 可移动弹窗 </p>
            <p> 可移动弹窗 </p>
        </div>
        <div>
            <p> 可移动弹窗 </p>
            <p> 可移动弹窗 </p>
        </div>
    </div>
</body>

</html>
<script>
    var oDiv = document.getElementById('middleBox');
    oDiv.onmousedown = down;
    function processThis(fn, obj) {
        return function (e) {
            fn.call(obj, e)
        }
    }
    function down(e) {
        e = e || window.event;
        this.currentoffsetLeft = this.offsetLeft;
        this.currentoffsetTop = this.offsetTop;
        this.currentclientX = e.clientX;
        this.currentclientY = e.clientY;
        if (this.setCapture) {
            this.setCapture();
            this.onmousemove = processThis(move, this);
            this.onmouseup = processThis(up, this);
        } else {
            document.onmousemove = processThis(move, this);
            document.onmouseup = processThis(up, this);
        }
    }
    function move(e) {
        var currentLeft = this.currentoffsetLeft + (e.clientX - this.currentclientX);
        var currentTop = this.currentoffsetTop + (e.clientY - this.currentclientY);
        //以下都是边界值的判断；
        var maxBodyWidth = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth;
        var maxBodyTop = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
        if (currentLeft > maxBodyWidth) {
            currentLeft = maxBodyWidth;
        } else if (currentLeft < 0) {
            currentLeft = 0;
        }
        if (currentTop > maxBodyTop) {
            currentTop = maxBodyTop;
        } else if (currentTop < 0) {
            currentTop = 0;
        }
        this.style.left = currentLeft + 'px';
        this.style.top = currentTop + 'px';
    }
    function up() {
        if (this.releaseCapture) {
            this.releaseCapture();
            this.onmousemove = null;
            this.onmouseup = null;
        } else {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
</script>
猜你喜欢
