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

时间：2019-07-23 15:19:31 阅读：99 评论：0 收藏：0 [点我收藏+]
标签：nbsp off select char back pre weight round webkit
<!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>
标签：nbsp off select char back pre weight round webkit
原文地址：https://www.cnblogs.com/timlinux/p/11231499.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行