<!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>

[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版的更多相关文章

  1. [TimLinux] JavaScript 模态框可拖动功能实现——节流版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

  4. [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

    1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...

  5. BootStrap 模态框禁用空白处点击关闭问题

    模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处,那就前功尽弃了..... 所以我们很有必要禁用鼠标点击空白处模态框关闭的功能. $('#myModal').modal({backd ...

  6. iframe中的模态框遮罩父窗口原理

    关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...

  7. bootstrap模态框关闭后清除模态框的数据

    https://segmentfault.com/q/1010000008789123 bootstrap模态框第二次打开时如何清除之前的数据? 我用了bootstrap模态框的remote功能,在弹 ...

  8. Bootstrap——可拖动模态框(Model)

    还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...

  9. 使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能

    常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...

随机推荐

  1. request爬虫通用的小技巧

    嵩天老师一直强调的通用代码框架,这个框架可以用在很多爬虫中用来获取HTML文本,并且它通过response.raise_for_status()方法判断返回的状态码是不是200,如果不是,就会引发HT ...

  2. IP网段的判断

    一.    OSI七层模型 表示 说明 作用 应用层 HTTP.ftp 协议 表示层 UTF-8 将应用层协议翻译成计算机可识别的语言 会话层 管理传输层 传输层 TCP/UDP 建立以及断开连接 网 ...

  3. 计划任务at和crontab

    目标:会看,会写计划任务时间,会制定计划任务 一次性:at yum -y install at #安装at systemctl start atd #启动at服务 systemctl enable a ...

  4. map的线程安全问题

    为什么HashMap是线程不安全的 总说 HashMap 是线程不安全的,不安全的,不安全的,那么到底为什么它是线程不安全的呢?要回答这个问题就要先来简单了解一下 HashMap 源码中的使用的存储结 ...

  5. 区块链原理、设计与应用pdf电子版下载

    链接:https://pan.baidu.com/s/1koShkDjEYOXxLOewZJU2Rw 提取码:8ycx 内容简介  · · · · · · 本书由专业区块链开发者撰写,是区块链开发起步 ...

  6. ZeroC Ice发送大数据

    继上文,我们使用ZeroC Ice传递大块数据时,通常有两种做法,一种是一次请求,另一种就是分多次请求(,这种做法在官方文档有例子).选哪一种根据需要而定. 当分多次请求来完成一大块数据,到底选择每次 ...

  7. 实现 Redis 协议解析器

    本文是 <用 Golang 实现一个 Redis>系列文章第二篇,本文将分别介绍Redis 通信协议 以及 协议解析器 的实现,若您对协议有所了解可以直接阅读协议解析器部分. Redis ...

  8. SpringBoot系列之i18n集成教程

    目录 1.环境搭建 2.resource bundle资源配置 3.LocaleResolver类 4.I18n配置类 5.Thymeleaf集成 SpringBoot系统之i18n国际化语言集成教程 ...

  9. 读取JDK API文档，并根据单词出现频率排序

    1,拿到 API 文档 登录 https://docs.oracle.com/javase/8/docs/api/ , 选中特定的类,然后 copy 其中的内容, 放入 TXT 文件中 , 2,读取T ...

  10. router-link传递参数

    有个功能: 依据传入值,跳到产品详情页,但是详情页的内容依据传入值来相应变化. 如果使用点击事件@clic来实现,则有三个重复的跳转代码. 避免多次定义重复函数,可以使用router-link 传参数 ...