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

<!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版的更多相关文章

[TimLinux] JavaScript 模态框可拖动功能实现——节流版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
[TimLinux] JavaScript 模态框可拖动功能实现——原始版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...
[TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件这个与onf ...
BootStrap 模态框禁用空白处点击关闭问题
模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处,那就前功尽弃了..... 所以我们很有必要禁用鼠标点击空白处模态框关闭的功能. $('#myModal').modal({backd ...
iframe中的模态框遮罩父窗口原理
关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...
bootstrap模态框关闭后清除模态框的数据
https://segmentfault.com/q/1010000008789123 bootstrap模态框第二次打开时如何清除之前的数据? 我用了bootstrap模态框的remote功能,在弹 ...
Bootstrap——可拖动模态框(Model)
还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...
使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能
常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...

随机推荐

Scrapy简单上手 —— 安装与流程
一.安装scrapy 由于scrapy依赖较多,建议使用虚拟环境 windows下pip安装(不推荐) 1.安装virtualenv pip install virtualenv 2.在你开始项目的文 ...
LocalDate类
LocalDate类与Date类不同.Date类是距离一个固定时间点的毫秒数(UTC 1970.1.1 00:00:00) Date类表示时间点,LocalDate类用来表示日历表示法. import ...
Hbase简介以及简单的入门操作
Hbase是一个分布式的.面向列的开源数据库,可实时的读写.随机访问超大规模的数据集. Hbase主要分为两种模型: 逻辑模型和物理模型 1. 逻辑模型 Hbase的名字的来源是Hadoop data ...
Sturts2整合Spring报错：org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from ServletContext resource [/WEB-INF/applicationContext.xml];
十一月 17, 2019 1:11:44 下午 org.apache.tomcat.util.digester.SetPropertiesRule begin警告: [SetPropertiesRul ...
领扣（LeetCode）两个数组的交集II 个人题解
给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = [4,9,5 ...
git操作忽略.iml文件
git操作忽略.iml文件** 参考:https://blog.csdn.net/m0_38001814/article/details/87354584 因为.iml文件的修改导致代码pull失败 ...
centos 生成网卡UUID
在Linux或CentOS中,可以通过如下命令获取网卡的uuid信息: uuidgen 网卡名07d07031-eb0f-4691-8606-befb46645433 查看网卡UUID nmcli c ...
PHP安全之道学习笔记1：PHP项目安全设置
在全球范围来看,超过了80%的网站是使用php进行搭建的,由于脚本语言和早期版本设计的诸多原因,php项目存在不少安全隐患.从配置选项来看,可以做如下的优化. 1.屏蔽PHP错误输出. 在/etc/p ...
php为什么需要异步编程？php异步编程的详解（附示例）
本篇文章给大家带来的内容是关于php为什么需要异步编程?php异步编程的详解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我对 php 异步的知识还比较混乱,写这篇是为了 ...
Java从零开始（前篇）
前篇自述本人大三通信专业,咸鱼一枚,对专业所学傅里叶变换等实在提不起兴趣. 幸好略学过c系列语言,但也浅尝辄止,浑浑噩噩,深入之后被指针弄地晕头转向. 想在毕业后转行计算机,于是我下定决心从零开始 ...

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

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

随机推荐

热门专题