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

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jQuery - 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 type="text/javascript" src="./jquery-2.2.4.js"></script>
        <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 = $('#idModalTitle');
                var $idDragModal = $idModalTitle.parent();
    
                var mouseStartPoint = {left: 0, top: 0};
                var mouseEndPoint = {left: 0, top: 0};
                var oldPoint = {left: 0, top: 0};
                var isDraging = false;
    
                $(document).on('mousedown', '.modal-title', function(e) {
                    // 关闭按钮不进行移动
                    if ($(e.target).hasClass('modal-close')) return false;
                    isDraging = true;
    
                    mouseStartPoint = {left: e.clientX, top: e.clientY};
                    oldPoint = $idDragModal.offset();  // 鼠标离模态框边距值
                    cancelUserSelect($idDragModal.get(0));
                });
    
                $(document).on('mousemove', function(e) {
                    if (!isDraging) return false;
                    
                    if ($idDragModal.css('margin-left') !== 0) {
                        $idDragModal.css('margin-left', 0);
                    }
                    
                    if ($idDragModal.css('margin-top') !== 0) {
                        $idDragModal.css('margin-top', 0);
                    }
    
                    var mouseX = e.clientX;
                    var mouseY = e.clientY;
                    
                    if (mouseX < 0) mouseX = 0;
                    if (mouseY < 0) mouseY = 25;
                    
                    mouseEndPoint = {left: mouseX, top: mouseY};
    
                    var newPoint = {
                        left: mouseEndPoint.left - (mouseStartPoint.left - oldPoint.left),
                        top: mouseEndPoint.top - (mouseStartPoint.top - oldPoint.top)
                    };
                    
                    $idDragModal.offset(newPoint);
                });
    
                $(document).on('mouseup', function(e) {
                    if (!isDraging) return false;
                    isDraging = false;
                    restoreUserSelect($idDragModal.get(0));
                });
            }
    
            drag();
        </script>
    </body>
    </html>
  • 相关阅读:
    Linux文件编辑器 vi
    Sudo 和 Root 帐号
    Linux基本命令篇的习题解答
    Linux应用篇
    VMware中虚拟机网卡的四种模式
    Ubuntu游戏集合
    Linux与Window文件共享
    Linux知识点滴II
    [转载][翻译]jQuery Mobile教程创建一个订餐web应用(下)
    在WPF中创建带有刻度线的滑动条
  • 原文地址:https://www.cnblogs.com/timlinux/p/11231499.html
Copyright © 2011-2022 走看看