[TimLinux] JavaScript 模态框可拖动功能实现——原始版

其他 2019-07-23 14:21:31 阅读次数: 0 
<!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>

猜你喜欢

转载自www.cnblogs.com/timlinux/p/11231330.html
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022