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

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Normal - 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);
                };
    
                document.onmousemove = function(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.onmouseup = function(e) {
                    if (!isDraging) return false;
                    isDraging = false;
                    restoreUserSelect(idDragModal);
                };
            }
    
            drag();
        </script>
    </body>
    </html>
  • 相关阅读:
    转载--php函数使用--var_export
    ZkApi的方法跨域访问ZkResource的静态资源文件出现的问题
    修改html内联样式的方法
    linux下的npm安装
    爬虫之静态网页爬虫(基础知识)
    利用jQuery使用HTML的formdata属性实现文件上传
    细说form表单
    session
    cookie和session(会话跟踪)
    同源策略和跨域问题
  • 原文地址:https://www.cnblogs.com/timlinux/p/11231330.html
Copyright © 2011-2022 走看看