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>
  • 相关阅读:
    hdu 3415 Max Sum of MaxKsubsequence
    poj 2243 Knight Moves
    【LCD手册】飞凌3.5/4.3/5.6/7/8 寸LCD手册大全下载
    【转载zq2002好文章】Windows CE 休眠唤醒全面解析(基于2440平台)(1)(2)(3)
    【转载】如果做到窗口自动适应不同尺寸屏幕的尺寸?
    【转载】wince6.0+s3c6410摄像头驱动修改
    推荐一个比较活跃的ARM/WinCE/LinuxQQ群
    【转载】微软的USB摄像头驱动,
    【收集】ARM+WinCE QQ 群
    【转载】S3C6410移植日记系列
  • 原文地址:https://www.cnblogs.com/timlinux/p/11231499.html
Copyright © 2011-2022 走看看