<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>setTimeout - 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>

        // 拖动时，偶发选中文本，将该选择功能禁用

        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 = document.getElementById('idModalTitle');

            var idDragModal = idModalTitle.parentNode;

            var diffLeft, diffTop, isDraging = false;

            idModalTitle.onmousedown = function(e) {

                var e = e || window.event;

                isDraging = true;

                diffLeft = e.clientX - idDragModal.offsetLeft;  // 鼠标离左边框的距离

                diffTop = e.clientY - idDragModal.offsetTop;  // 鼠标离顶部边框的距离

                cancelUserSelect(idDragModal);

            };

            function modalMove(e) {

                var e = e || window.event;

                if (!isDraging) return false;

                if (idDragModal.style.marginLeft !== 0) {

                    idDragModal.style.marginLeft = 0;

                }

                if (idDragModal.style.marginTop !== 0) {

                    idDragModal.style.marginTop = 0;

                }

                // 新的鼠标离浏览器左边距离，减去鼠标离左边框的距离

                var left = e.clientX - diffLeft;

                // 新的鼠标离浏览器顶部距离，减去鼠标离顶部边框的距离

                var top = e.clientY - diffTop;

                if (left < 0) {

                    left = 0;

                } else if (left > window.innerWidth - idDragModal.offsetWidth) {

                    left = window.innerWidth - idDragModal.offsetWidth;

                }

                if (top < 0) {

                    top = 0;

                } else if (top > window.innerHeight - idDragModal.offsetHeight) {

                    top = window.innerHeight - idDragModal.offsetHeight;

                }

                idDragModal.style.left = left + "px";

                idDragModal.style.top = top + "px";

            };

            document.onmousemove = function() {

                var that = this;

                var thatArguments = arguments;

                clearTimeout(modalMove.timeoutId);

                modalMove.timeoutId = setTimeout(function() {

                    modalMove.apply(that, thatArguments);

                }, 50);

            };

            document.onmouseup = function(e) {

                if (!isDraging) return false;

                isDraging = false;

                restoreUserSelect(idDragModal);

            };

        }

        drag();

    </script>

</body>

</html>

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

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

    <!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. bootstrap模态框关闭后清除模态框的数据

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

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

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

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

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

  9. Bootstrap3.0学习教程十七：JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

随机推荐

  1. 高性能Web动画和渲染原理系列（4）“Compositor-Pipeline演讲PPT”学习摘要

    目录 摘要 1.合成流水线 2. 预定义UI层 3. paint是什么意思 4. 分层的优势和劣势 5. 视图属性及其处理方式 6. Quads 7. Compositor Frame 8. 关于光栅 ...

  2. java jar包在dos框运行步骤演练

    1.选择需要打包的   java project 2.右击,    选择export点击 , 3 选择java选项中的jar file选项 , 点击下一步 4 确认你需要的打包的项目, 点击下一步 5 ...

  3. beyong Compare4解决30天的评估期结束

    刚开始是删掉注册表的CacheId(无效) 1.在搜索栏中输入 regedit ,打开注册表2.删除项目CacheId :HKEY_CURRENT_USER\Software\Scooter Soft ...

  4. nyoj 75-日期计算 (闰年与平年的判断)

    75-日期计算 内存限制:64MB 时间限制:3000ms 特判: No 通过数:19 提交数:31 难度:1 题目描述: 如题,输入一个日期,格式如:2010 10 24 ,判断这一天是这一年中的第 ...

  5. 力扣（LeetCode）二进制间距 个人题解

    输入:6 输出:1 解释: 6 的二进制是 0b110 . 示例 4: 输入:8 输出:0 解释: 8 的二进制是 0b1000 . 在 8 的二进制表示中没有连续的 1,所以返回 0 . 提示: 1 ...

  6. ZeroC Ice发送大数据

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

  7. 记一次LDAP主从同步配置

    LDAP主从同步 OpenLDAP在2.3版本之前的同步复制带有一系列缺点如只支持一主多从模式等,在此缺点就不多说,下文着重介绍一下OpenLDAP V2.4以后的同步负复制功能 同步功能 2.4版最 ...

  8. 2016 校招， Android 开发，一个本科应届的坎坷求职之路（转）

    转载出处:http://www.nowcoder.com/discuss/3244?type=2&order=0&pos=1&page=1 和大多数的面经不同,我不是大牛,手头 ...

  9. 2019-10-24：渗透测试，sqli-labe,less18,19关

    less19基于错误_POST_Referer_请求头注入 查看关键源码,跟18关不一样的只是,回显的是Referer不是User-Agent,判断INSERT语句结构:INSERT INTO tab ...

  10. 多线程之美3一Java并发工具类

    一.简介 1.1. Semaphore 信号量,见文知义,常用于并发控制中的限流作用,我理解是限定数量的共享锁机制.该共享资源最多同时可让n个线程访问,超过n个线程就阻塞等待,如有资源空闲, 唤醒其他 ...