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>
  • 相关阅读:
    使用cwRsync实现windows下文件定时同步【转】
    asp.net负载均衡方案[转]
    SQL Server复制入门(一)----复制简介【转】
    使用ServiceStackRedis链接Redis简介 [转]
    Sqlserver事务发布实现数据同步
    C#MongoDB 分页查询的方法及性能
    C#基础-Func,Action
    OpenERP 的XML-RPC的轻度体验+many2many,one2many,many2one创建方式
    使用xml-rpc调试openerp模块中的函数
    Odoo(OpenERP)开发实践：通过XML-RPC接口访问Odoo数据库
  • 原文地址：https://www.cnblogs.com/timlinux/p/11231361.html
Copyright © 2011-2022 走看看