117可拖拽弹窗

最新推荐文章于 2023-10-11 17:11:58 发布

weixin_30389003

最新推荐文章于 2023-10-11 17:11:58 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/11028953.html

版权

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

<head>
    <meta charset="UTF-8">
    <title>可拖拽弹窗</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

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

        #middleBox {
            padding: 0 30px;
            position: absolute;
            background: #ddd;
            margin: auto;
            cursor: pointer;
            width: 600px;
            height: 400px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            user-select: none;
        }

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

<body class="outerBox">
    <div id="middleBox">
        <div>
            <p> 本弹窗特征： </p>
            <p> 1、内容区可拖拽 </p>
            <p> 2、内容区可以是任意高度、宽度 </p>
            <p> 3、初始位置居中，由下面css决定 </p>
            <div style="padding-left:30px;">
                <p> left: 50%; </p>
                <p> top: 50%;</p>
                <p> transform: translate(-50%, -50%);</p>
            </div>
            <p> 4、关闭弹窗之前，用上面css代码重置弹窗的位置，否则，下次使用弹窗时，弹窗将出现在上次关闭时的地方。 </p>
            <p> 5、弹窗向任何方向（上下左右）拖拽，当消失3/4时，停止移动。 </p>
        </div>
    </div>
</body>

</html>
<script>
    var oDiv = document.getElementById('middleBox');
    oDiv.onmousedown = down;
    function processThis(fn, currentThis) {
        return function (event) {
            fn.call(currentThis, event)//”先触发，后执行“与”先执行，后触发“
        }
    }
    function down(event) {
        event = event || window.event;
        this.initOffsetLeft = this.offsetLeft;
        this.initOffsetTop = this.offsetTop;
        this.initClientX = event.clientX;
        this.initClientY = event.clientY;
        this.maxOffsetWidth = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth;
        this.maxOffsetHeight = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
        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(event) {
        var currentLeft = this.initOffsetLeft + (event.clientX - this.initClientX);
        var currentTop = this.initOffsetTop + (event.clientY - this.initClientY);

        //以下都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失3/4时，停止移动。
        if (currentLeft > this.maxOffsetWidth + this.clientWidth / 0.8) {
            currentLeft = this.maxOffsetWidth + this.clientWidth / 0.8;
        } else if (currentLeft < -this.clientWidth / 4) {
            currentLeft = -this.clientWidth / 4;
        }
        if (currentTop > this.maxOffsetHeight + this.clientHeight / 0.8) {
            currentTop = this.maxOffsetHeight + this.clientHeight / 0.8;
        } else if (currentTop < -this.clientHeight / 4) {
            currentTop = -this.clientHeight / 4;
        }
        //以上都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失3/4时，停止移动。

        //以下都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失1/2时，停止移动。
        /* if (currentLeft > this.maxOffsetWidth + this.clientWidth) {
            currentLeft = this.maxOffsetWidth + this.clientWidth;
        } else if (currentLeft < -this.clientWidth / 64) {
            currentLeft = -this.clientWidth / 64;
        }
        if (currentTop > this.maxOffsetHeight + this.clientHeight) {
            currentTop = this.maxOffsetHeight + this.clientHeight;
        } else if (currentTop < -this.clientHeight / 64) {
            currentTop = -this.clientHeight / 64;
        } */
        //以上都是边界值的判断；弹窗向任何方向（上下左右）拖拽，当消失1/2时，停止移动。

        //以下都是边界值的判断；弹窗向任何方向（上下左右）拖拽，触边时，停止移动。
        /* if (currentLeft > this.maxOffsetWidth + this.clientWidth / 2) {
            currentLeft = this.maxOffsetWidth + this.clientWidth / 2;
        } else if (currentLeft < this.clientWidth / 2) {
            currentLeft = this.clientWidth / 2;
        }
        if (currentTop > this.maxOffsetHeight + this.clientHeight / 2) {
            currentTop = this.maxOffsetHeight + this.clientHeight / 2;
        } else if (currentTop < this.clientHeight / 2) {
            currentTop = this.clientHeight / 2;
        } */
        //以上都是边界值的判断；弹窗向任何方向（上下左右）拖拽，触边时，停止移动。

        this.style.left = currentLeft + 'px';
        this.style.top = currentTop + 'px';
        console.log(this.style.left);
        console.log(this.style.top);
    }
    function up() {
        if (this.releaseCapture) {
            this.releaseCapture();
            this.onmousemove = null;
            this.onmouseup = null;
        } else {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
</script>

转载于:https://www.cnblogs.com/gushixianqiancheng/p/11028953.html

weixin_30389003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
117可拖拽弹窗

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可拖拽弹窗</title> <style> * { padding: 0; ...
复制链接

扫一扫