117可拖拽弹窗

Posted 2022-01-13 gushixianqiancheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了117可拖拽弹窗相关的知识，希望对你有一定的参考价值。

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

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

        html,
        body 
            height: 100%;
        

        .outerBox 

            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>

以上是关于117可拖拽弹窗的主要内容，如果未能解决你的问题，请参考以下文章