（之前的那个模板方法模式实在没搞懂...等几天再去研究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. Mysql主外键

    主键  primary   key 创建表时直接加上主键: create table student1(id int primary key, name varchar(20), age int, g ...

  2. 《大型网站系统与Java中间件实现》有感

    头一次只用了一周的时间就看完一本书<大型网站系统与Java中间件实现>,这本书是关于设计方面的,提到了服务框架,消息中间件,数据访问层,以及如何解决应用之间的调用,解耦,以及应用和存储之间 ...

  3. 2019CVTE技术支持软件编程2

    题目:有8位数密码,加密规则如下:第一步取最后一位数:第二部将倒数第二位数放到最前形成一个新数,再取新数最后一位,以此循环取完所有数为止:如98698426,密码为64982689,时间复杂度为O(N ...

  4. DataGrip for Mac破解步骤详解 亲测好用

    https://blog.csdn.net/le945926/article/details/81912085

  5. Yii2 使用 QQ 和 Weibo 第三方登录源码

    我们社区在 yii2-authclient 多次升级后,登录异常.一直想寻求一种通用的方法,尽量不重写 OAuth2, BaseOAuth 以及 OAuthToken 类, 所以本次直接在 initU ...

  6. 创建一个dynamics 365 CRM online plugin (六) - Delete plugin from CRM

    我们之前都学习到怎么添加,debug还有update plugin. 今天带大家过一下怎么从CRM instance当中删除plugin. 首先让我们打开Settings -> Customiz ...

  7. Windows7 Autoconfiguration IPv4 Address 导致无法上网

    Windows7 Autoconfiguration IPv4 Address 导致无法上 (2010-03-30 16:44:57) 转载▼ 标签: 杂谈 分类: 电脑软件问题 Windows7 A ...

  8. python selenium-webdriver 处理JS弹出对话框（六）

    在实际系统中,在完成某些操作时会弹出对话框来提示,主要分为"警告消息框","确认消息框","提示消息对话"三种类型的对话框. 1.警告消息框 ...

  9. c# 程序只能运行一次(多次运行只能打开同一个程序)

    转自:https://social.msdn.microsoft.com/Forums/zh-CN/6398fb10-ecc2-4c03-ab25-d03544f5fcc9/2291420309357 ...

  10. 把一个对象转成map对象

    import java.lang.reflect.Field;import java.util.HashMap; public class Util { public static HashMap&l ...