[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>