（之前的那个模板方法模式实在没搞懂...等几天再去研究8）

预览效果：

限制拖动范围在视口内、调整窗口时自动居中...

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body{

            background-image: url("images/baidu_demo.png");

            background-repeat: no-repeat;

            background-position: top center;

            background-color: #fff;

            /* 注意这个作用 */

            padding: 0px;

            margin: 0px;

            font-size: 12px;

            /* font-family: "微软雅黑"; */

        }

        .ui-dialog{

            display: none;

            width: 380px;

            height: auto;

            position: absolute;

            z-index: 1000;

            top: 0px;

            left: 0px;

            border: 1px solid #d5d5d5;

            background-color: #fff;

        }

        .ui-dialog-title{

            height: 48px;

            line-height: 48px;

            padding:0px 20px;

            color: #535353;

            font-size: 16px;

            background: #f5f5f5;

            border-bottom: 1px solid #efefef;

            cursor: move;

            user-select: none;

        }

        .ui-dialog-content{

            padding: 15px 20px;

        }

        .ui-dialog a{

            text-decoration: none;

        }

        .ui-dialog-closeButton{

            display: block;

            width: 16px;

            height: 16px;

            position: absolute;

            top: 12px;

            right: 20px;

            background: url("images/close_def.png") no-repeat;

            cursor: pointer;

        }

        .ui-dialog-closeButton:hover{

            background: url("images/close_hov.png");

        }

        .ui-dialog-pt15{

            padding-top: 15px;

        }

        p{

            margin-block-start: 0em;

            margin-block-end: 0em;

            margin-inline-start: 0px;

            margin-inline-end: 0px;

        }

        .ui-dialog-l40{

            height: 40px;

            line-height: 40px;

            text-align: right;

        }

        .ui-dialog-input{

            width: 100%;

            height: 40px;

            margin:0px;

            padding: 0px;

            border: 1px solid #d5d5d5;

            font-size: 16px;

            color: black;

            text-indent: 25px;

            outline: none;

        }

        .ui-dialog-input-username{

            background: url("images/input_username.png") no-repeat 2px;

        }

        .ui-dialog-input-password{

            background: url("images/input_password.png") no-repeat 2px;

        }

        .ui-dialog-submit{

            width: 100%;

            height: 50px;

            background: #3b7ae3;

            border:none;

            font-size: 16px;

            color: #fff;

            outline: none;

            text-decoration: none;

            display: block;

            text-align: center;

            line-height: 50px;

        }

        .ui-mask{

            width: 100%;

            height: 100%;

            background: #000;

            opacity: 0.4;

            position: absolute;

            top: 0;

            left: 0;

            z-index: 900;

            display: none;

        }

        .link{

            text-align: right;

            line-height: 20px;

            padding-right: 40px;

        }

    </style>

</head>

<body>

    <div class="ui-dialog" id="dialog">

        <!-- 标题栏 -->

        <div class="ui-dialog-title" id="dialog-title">

            <a href="javascript:hideDialog();" class="ui-dialog-closeButton"></a>

            <p>登录通行症</p>

        </div>

        <!-- 内容区域 -->

        <div class="ui-dialog-content">

            <div class="ui-dialog-l40 ui-dialog-pt15">

                <input placeholder="手机/邮箱/用户名" type="input" class="ui-dialog-input ui-dialog-input-username">

            </div>

            <div class="ui-dialog-l40 ui-dialog-pt15">

                <input placeholder="密码" type="input" class="ui-dialog-input ui-dialog-input-password">

            </div>

            <div class="ui-dialog-l40">

                <a href="#">忘记密码</a>

            </div>

            <div class="ui-dialog-submit">

                <a href="#" class="ui-dialog-submit">登录</a>

            </div>

            <div class="ui-dialog-l40">

                <a href="#">立即注册~</a>

            </div>

        </div>

    </div>

    <div class="ui-mask" id="mask" onselectstart="return false"></div>

    <div class="link">

        <a href="javascript:showDialog();">登录</a>

    </div>

</body>

<script>

    //按下时，标记为可拖动。开始拖动，更新position。松开，标记不可拖动

    //获取对象

    function getElement(id){

        return document.getElementById(id);

    };

    //自动居中函数（提示框）

    function autoCenter(el){

        var bodyWidth = document.documentElement.clientWidth;

        var bodyHeight = document.documentElement.clientHeight;

        var elWidth = el.offsetWidth;

        var elHeight = el.offsetHeight;

        el.style.left = (bodyWidth-elWidth)/2 + "px";

        el.style.top = (bodyHeight-elHeight)/2 + "px";

    }

    //自动全屏函数（遮罩）

    function furfillBody(el){

        el.style.width = document.documentElement.clientWidth + "px";

        el.style.Height = document.documentElement.clientHeight + "px";

    }

    var mouseOffsetX = 0,

        mouseOffsetY = 0;

    var draggble = false;//是否可拖拽，一会用data-xxx写

    //在标题栏上按下，计算相对拖拽元素左上角坐标，并标记该元素可拖动

    getElement("dialog-title").addEventListener('mousedown',function(e){

        console.log(e);

        var e = e || window.event;

        mouseOffsetX = e.pageX - getElement('dialog').offsetLeft;

        mouseOffsetY = e.pageY - getElement('dialog').offsetTop;

        draggble = true;

        console.log(mouseOffsetX,mouseOffsetY,draggble);

        //记录当前鼠标在标题栏中的相对位置

        //注意这里是整个登陆浮层

    })

    //按下开始移动，先检查是否已被标记为可拖动，如果是则进行更新（减去第一步中已经获得的便宜）

    document.onmousemove = function(e){

        var e = e || window.event;

        mouseX = e.pageX;//鼠标当前位置

        mouseY = e.pageY;

        var moveToX = 0,//新位置

            moveToY = 0;

            if(draggble){

                // console.log(1);

                moveToX = mouseX - mouseOffsetX;

                moveToY = mouseY - mouseOffsetY;

                var pageWidth = document.documentElement.clientWidth;

                var pageHeight = document.documentElement.clientHeight;

                var dialogWidth = getElement('dialog').offsetWidth;

                var dialogHeight = getElement('dialog').offsetHeight;

                var maxX = pageWidth - dialogWidth;

                var maxY = pageHeight - dialogHeight;

                moveToX = Math.min(maxX , Math.max(0,moveToX) );

                moveToY = Math.min(maxY , Math.max(0,moveToY) );

                getElement('dialog').style.left = moveToX + "px";

                getElement('dialog').style.top = moveToY + "px";

            }

    }

    //鼠标松开，标记为不可拖动

    //针对于整个document

    document.onmouseup = function(){

        draggble = false;

    }

    function showDialog(){

        getElement('dialog').style.display = "block";

        getElement('mask').style.display = "block";

        autoCenter(getElement('dialog'));

        furfillBody(getElement('mask'));

    };

    function hideDialog(){

        getElement('dialog').style.display = "none";

        getElement('mask').style.display = "none";

    };

    //窗口改变大小时的事件处理

    window.onresize = function(){

        autoCenter(getElement('dialog'));

        furfillBody(getElement('mask'))

    }

</script>

</html>

示意图：

几个之前没有接触的知识点：
user-select：none；禁止用户选中文字，
outline：绘制元素周围的一条线，不占空间，不一定是矩形

JavaScript：鼠标拖拽效果的更多相关文章

  1. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  2. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  3. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  4. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  6. Javascript:简单拖拽效果的实现

    核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...

  7. Jquery实现鼠标拖拽效果

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  8. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  9. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

随机推荐

  1. python画高斯分布图形

    高斯分布,也叫正态分布,是一个在数学.物理及工程等领域都非常重要的概率分布,在统计学的许多方面有着重大的影响力. 若随机变量X服从一个数学期望为μ.方差为σ^2的正态分布,记为N(μ,σ^2).其概率 ...

  2. 《python for data analysis》第二章，美国1880-2010年出生人口姓名的数据分析

    <利用python进行数据分析>第二章的姓名例子,代码.整个例子的所有代码集成到了一个文件中,导致有些对象名如year同时作为了列名与行名,会打印warning,可分不同的part依次运行 ...

  3. Ubuntu 16.04 强制使用ipv4安装apt-get

    参考文献:https://www.linuxidc.com/Linux/2015-09/123340.htm 起因:每次校园网都要自动用ipv6不知道为什么又总之链接不上,导致安装失败,有以下命令强行 ...

  4. 【转载】【原创】华硕F8TR笔记本更换主板及喇叭教程

    转载地址:http://blog.sina.com.cn/s/blog_6241aaed0102w4e6.html [原创]华硕F8TR笔记本更换主板及喇叭教程     华硕AUSU F8TR笔记本 ...

  5. Galaxian 小蜜蜂

    发售年份 1979 平台 街机 开发商 南梦宫(Namco) 类型 射击 https://www.youtube.com/watch?v=XhYVcwhSWjI

  6. gerrit工具的数据提交流程

    检查服务器有没有更新:1.检查服务器有没有更新git fetch如果有内容,代表服务器版本有更新,需要把本机修改暂存(第二步),拉下服务器内容(第三步)如果没有内容,代表服务器没有更新,跳至52.本地 ...

  7. Vue 中渲染字符串形式的组件标签

    在vue中如果要渲染字符串形式的标签,vue 提供了 v-html 指令,可以很方便的渲染出来.但是如果这个标签是一个组件,或者element-ui 的组件时,就不能解析出来了,因为v-html 只能 ...

  8. MySQL 设置root密码报错：mysqladmin: connect to server at 'localhost' failed

    MySQL 设置root密码报错:mysqladmin: connect to server at 'localhost' failed 1.安装完MySQL设置root密码报错如下 [root@vm ...

  9. NetCore部署到Linux服务器+Supervisor的步骤及过程中踩过的坑

    本文作备忘使用 服务器配置: 下面是所有操作的具体步骤: 1.安装nginx   参考 1.1 添加源:默认情况Centos7中没有Nginx源,最近Nginx官网提供了Centos的源地址. sud ...

  10. html限制文本框只能输入数字和一个小数点

    近期在做一个前台页面,有一个文本框是用来输入充值金额的,就想到了限制用户只能输入纯数字的数据且只能包含一个小数点.下面就是我实现的代码 $(function() { //阻止数字键以外的按键输入 $( ...