zoukankan      html  css  js  c++  java
  • [TimLinux] JavaScript 模态框可拖动功能实现——节流版

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>setTimeout - Drag</title>
        <style>
            .modal {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(100, 100, 100, 0.5);
                z-index: 2001;
            }
            
            .modal-content {
                position: absolute;
                width: 500px;
                height: 300px;
                left: 50%;
                margin-left: -250px;
                margin-top: 100px;
                border: 10px solid rgba(150, 150, 150, 0.5);
                background-color: white;
                text-align: center;
            }
            
            .modal-title {
                height: 38px;
                border-bottom: 1px solid blue;
                text-align: left;
                padding: 0 10px;
                font-weight: bold;
                cursor: move;
            }
            
            .modal-title div {
                display: inline-block;
                font-size: larger;
                line-height: 2;
                padding: 0 8px;
            }
            
            .modal-title .modal-close {
                float: right;
                cursor: pointer;
            }
            
            .modal-title .modal-close:hover {
                background-color: rgb(198, 236, 236);
            }
        </style>
    </head>
    <body>
        <div>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
            <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
        </div>
        <div id="idModal" class="modal">
            <div id="idModalDetail" class="modal-content">
                <div id="idModalTitle" class="modal-title">
                    <div>可拖动</div>
                    <div class="modal-close">X</div>
                </div>
                <div class="modal-body">This is drag modal</div>
            </div>
        </div>
        <script>
            // 拖动时,偶发选中文本,将该选择功能禁用
            function cancelUserSelect(ele) {
                if (!ele) return false;
                document.body.style.userSelect = 'none';
                document.body.style.webkitUserSelect = 'none';
                document.body.style.msUserSelect = 'none';
                document.body.style.mozUserSelect = 'none';
    
                ele.style.userSelect = 'none';
                ele.style.webkitUserSelect = 'none';
                ele.style.msUserSelect = 'none';
                ele.style.mozUserSelect = 'none';
            }
            
            // 恢复禁用的文本选择功能
            function restoreUserSelect(ele) {
                if (!ele) return false;
                document.body.style.userSelect = 'text';
                document.body.style.webkitUserSelect = 'text';
                document.body.style.msUserSelect = 'text';
                document.body.style.mozUserSelect = 'text';
    
                ele.style.userSelect = 'text';
                ele.style.webkitUserSelect = 'text';
                ele.style.msUserSelect = 'text';
                ele.style.mozUserSelect = 'text';
            }
            
            function drag() {
                var idModalTitle = document.getElementById('idModalTitle');
                var idDragModal = idModalTitle.parentNode;
                var diffLeft, diffTop, isDraging = false;
                
                idModalTitle.onmousedown = function(e) {
                    var e = e || window.event;
                    isDraging = true;
                    diffLeft = e.clientX - idDragModal.offsetLeft;  // 鼠标离左边框的距离
                    diffTop = e.clientY - idDragModal.offsetTop;  // 鼠标离顶部边框的距离
                    cancelUserSelect(idDragModal);
                };
    
                function modalMove(e) {
                    var e = e || window.event;
                    if (!isDraging) return false;
                    
                    if (idDragModal.style.marginLeft !== 0) {
                        idDragModal.style.marginLeft = 0;
                    }
                    
                    if (idDragModal.style.marginTop !== 0) {
                        idDragModal.style.marginTop = 0;
                    }
                    
                    // 新的鼠标离浏览器左边距离,减去鼠标离左边框的距离
                    var left = e.clientX - diffLeft;
                    // 新的鼠标离浏览器顶部距离,减去鼠标离顶部边框的距离
                    var top = e.clientY - diffTop;
                    
                    if (left < 0) {
                        left = 0;
                    } else if (left > window.innerWidth - idDragModal.offsetWidth) {
                        left = window.innerWidth - idDragModal.offsetWidth;
                    }
                    
                    if (top < 0) {
                        top = 0;
                    } else if (top > window.innerHeight - idDragModal.offsetHeight) {
                        top = window.innerHeight - idDragModal.offsetHeight;
                    }
                    
                    idDragModal.style.left = left + "px";
                    idDragModal.style.top = top + "px";
                };
    
                document.onmousemove = function() {
                    var that = this;
                    var thatArguments = arguments;
                    clearTimeout(modalMove.timeoutId);
                    modalMove.timeoutId = setTimeout(function() {
                        modalMove.apply(that, thatArguments);
                    }, 50);
                };
                
                document.onmouseup = function(e) {
                    if (!isDraging) return false;
                    isDraging = false;
                    restoreUserSelect(idDragModal);
                };
            }
    
            drag();
        </script>
    </body>
    </html>
  • 相关阅读:
    如何在DBGrid中能支持多项记录的选择
    How to create a OnCellDblClick for Delphi's TDBGrid
    如何在DBGrid里实现Shift+“选择行”区间多选的功能!
    DBGrid中Shift多选
    代码校验工具 SublimeLinter 的安装与使用
    jquery压缩图片插件
    React 入门最好的实例-TodoList
    前端切图
    提升前端效率的方式
    单页面应用的痛点
  • 原文地址:https://www.cnblogs.com/timlinux/p/11231361.html
Copyright © 2011-2022 走看看