JavaScript：鼠标拖拽效果

（之前的那个模板方法模式实在没搞懂...等几天再去研究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：鼠标拖拽效果的更多相关文章

JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...
javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
js 鼠标拖拽效果实现
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
用JavaScript实现div的鼠标拖拽效果
实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...
Javascript:简单拖拽效果的实现
核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...
Jquery实现鼠标拖拽效果
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
jQuery的DOM操作实例（2）——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果二.jQuery编写的拖拽效果三.在jQuery中拓展一个拖拽插件
拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

随机推荐

在Ubuntu下安装lrzsz
目录自动安装手动安装下载解压安装创建连接在Ubuntu 14.04x64下安装lrzsz 自动安装在终端中,输入命令 sudo apt-get install lrzsz 由于一些原因 ...
个性化自己的DOS窗口
就是为了好看吧,感觉没啥大用 ============= 首先创建一个文本,写下如下命令 @echo off color D echo ======================== echo == ...
学习笔记TF065:TensorFlowOnSpark
Hadoop生态大数据系统分为Yam. HDFS.MapReduce计算框架.TensorFlow分布式相当于MapReduce计算框架,Kubernetes相当于Yam调度系统.TensorFlow ...
洛谷10月月赛II题解
[咻咻咻] (https://www.luogu.org/contestnew/show/11616) 令人窒息的洛谷月赛,即将参加NOIp的我竟然只会一道题(也可以说一道也不会),最终145的我只能 ...
Windows batch file
Echo off @ECHO OFF echo string to generate the output create a blank line echo . create a file echo ...
Base64编码解码JS
function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...
C#集合类型大揭秘【转载】
[地址]https://www.cnblogs.com/songwenjie/p/9185790.html 集合是.NET FCL(Framework Class Library)的重要组成部分,我们 ...
A*搜索详解(2)——再战觐天宝匣
书接上文.在坦克寻径的,tank_way中,A*算法每一步搜索都是选择F值最小的节点,步步为营,使得寻径的结果是最优解.在这个过程中,查找最小F值的算法复杂度是O(n),这对于小地图没什么问题,但是对 ...
Panel 中加载窗体
pnlMain.Controls.Clear(); ControlAnalyzer1 CA1 = new ControlAnalyzer1(); CA1.TopLevel = false; CA1.S ...
python之自动补全 tab
1.在python中运行命令sys.path查看python路径 >>> import sys>>> import tabTraceback (most recen ...

JavaScript：鼠标拖拽效果

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

随机推荐

热门专题