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>
  • 相关阅读:
    Docker最全教程之使用Tencent Hub来完成CI(九)
    程序员十大热门flag,有你的吗?
    互联网寒冬,阿里Ant Design还开坑,程序员该何去何从?
    Docker最全教程——从理论到实战(八)
    开源库Magicodes.Storage正式发布
    Docker最全教程——从理论到实战(七)
    开源库支付库Magicodes.Pay发布
    产品经理如何避免被程序员打?
    Docker最全教程——从理论到实战(六)
    如何解决input file 选取相同文件后,change事件不起作用解决方法
  • 原文地址:https://www.cnblogs.com/timlinux/p/11231499.html
Copyright © 2011-2022 走看看