<!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. 网络编程--UDP通讯

    UTP传输 public class Send1 { public static void main(String[] args) throws Exception { Scanner sc=new ...

  2. linux服务器MySQL数据从磁盘拷贝以及恢复

    偶有感触:遇到这个问题,经过一个下午的排查, 终于解决. 故事情节:我的阿里云服务器突然被黑客攻击了,整个系统down了. 找客服,他们排查说usr目录的文件全部丢失.让我重新初始化系统盘.初始化之前 ...

  3. nyoj 349 (poj 1094) (拓扑排序)

    Sorting It All Out 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 An ascending sorted sequence of distinct ...

  4. pat 1023 Have Fun with Numbers（20 分）

    1023 Have Fun with Numbers(20 分) Notice that the number 123456789 is a 9-digit number consisting exa ...

  5. Redis的内存淘汰策略

    Redis占用内存大小 我们知道Redis是基于内存的key-value数据库,因为系统的内存大小有限,所以我们在使用Redis的时候可以配置Redis能使用的最大的内存大小. 1.通过配置文件配置 ...

  6. 数据类型转换&运算符

    基本数据类型注意事项 整型类型:long>int>short>byte java默认类型为int型 long a = 123 表示将int类型的数值赋给更大范围的long类型,当数据 ...

  7. window系统下删除多余的引导

    window系统下删除多余的引导 1.首先第一步进入EFI分区删除多余系统引导,只留下需要的引导 如何进入EFI分区 a)win 搜索框输入cm, 右键以管理员运行命令行 b)输入命令 diskpar ...

  8. Python算法——《算法图解》笔记

    算法目录 二分查找 大O表示法 选择排序 递归 快速排序,分而治之(D&C) 散列表——字典 广度优先搜索——BFS Dijkstra算法 贪婪算法 二分查找 # 要求list是有序表,num ...

  9. Java基础知识总结之多线程

    1.基本概念 进程是程序的一次动态执行过程,是系统进行资源分配和调度运行的基本单位. 线程是进程的一个实体,它是比进程更小的的能够独立运行的基本单位.在引入线程的操作系统中,通常都是把进程作为分配资源 ...

  10. Java基础IO类之字节输入输出流

    一.IO流概述 1.IO流:输入输出流(Input/Output) 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象,即数据在设备间的传输流, 流的本质是数据传输,根据数据传输特性将 ...