<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Normal - 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);

            };

            document.onmousemove = function(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.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. Scrapy简单上手 —— 安装与流程

    一.安装scrapy 由于scrapy依赖较多,建议使用虚拟环境 windows下pip安装(不推荐) 1.安装virtualenv pip install virtualenv 2.在你开始项目的文 ...

  2. JVM原理速记复习Java虚拟机总结思维导图面试必备

    良心制作,右键另存为保存 喜欢可以点个赞哦 Java虚拟机 一.运行时数据区域 线程私有 程序计数器 记录正在执行的虚拟机字节码指令的地址(如果正在执行的是Native方法则为空),是唯一一个没有规定 ...

  3. Python字典 你必须知道的用法系列

    本文Python版本为3.7.X,阅读本文之前需了解python字典的基本用法. 介绍 字典(dict)是Python中内置的一个数据结构,由多个键值对组成,键(key)和值(value)用冒号分隔, ...

  4. MySQL InnoDB MVCC

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  5. [LC]21题 Merge Two Sorted Lists （合并两个有序链表）（链表）

    ①英文题目 Merge two sorted linked lists and return it as a new list. The new list should be made by spli ...

  6. 判断DataGridView是否选中某行

    if (this.Drawing_GridView.SelectedColumns.Count == 0)//判断是否选中某行 { }

  7. 注意android辅助服务事件不能用于保存

    本来希望把来自辅助服务的事件,像epoll那样暂存在队列进行调度,或者做成事件堆栈,从而将辅助服务事件加入到容器.但是一直不能达到预期的后果.最后才发现一个坑人的事实,辅助服务事件被释放(或者说重置) ...

  8. 在linux系统下进行pip升级注意事项

    今天鼓捣爬虫的时候需要用pip安装beautifulsoup4,但是出现了错误,说我的pip版本太低,需要升级一下.刚开始我用了下面这段代码: pip install --upgrade pip 显示 ...

  9. Mac安装和卸载Mysql

    目录 一.安装 二.环境变量 2.1 MySQL服务的启停和状态的查看 三.启动 四.初始化设置 4.1 退出sql界面 五.配置 5.1 检测修改结果 一.安装 第一步:打开网址,https://w ...

  10. 万恶之源-python加深

    1.列表 1.1列表的含义: ​ 它是以[]括起来,每个元素用""引起来,用逗号隔开而且可以存放各种类型的数据. li=["樊大爷",王立军",&qu ...