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

随机推荐

继续写java和socket
上回书说道,java中通过socket链接的两台计算机可以通过两端的两个Socket对象来读取和发送来自流的信息所以对于客户端和服务端只需要封装一个相同的收发信息的窗口就好代码如下 package ...
Redis纠错
在Java使用Redis的过程中遇见了一个问题, redis.clients.jedis.exceptions.JedisConnectionException: Could not get a re ...
Linux第二节课学习笔记
虚拟机不一定要安装12版本,但仅有12版本支持RHCE模拟考试环境,激活码可以百度. 在创建新的虚拟机过程中,安装客户机操作系统时需要选择稍后安装操作系统,否则会默认最小化安装导致后面课上很多命令不能 ...
经典问题----拓扑排序（HDU2647）
题目简介:有个工厂的老板给工人发奖金,每人基础都是888,工人们有自己的想法,如:a 工人想要比 b 工人的奖金高,老板想要使花的钱最少那么就可以给b 888,给a 889 ,但是如果在此基础上, ...
MySQL 表字段操作
MySQL 表字段操作一.增加表字段 1)mysql> alter table 二.删除表字段三.修改表字段
UnicodeEncodeError: 'ascii' codec can't encode characters in position 1-5: ordinal not in range(128)
原因是pip安装python包会加载我的用户目录,我的用户目录恰好是中文的,ascii不能编码.解决办法是: python目录 Python27\Lib\site-packages 建一个文件site ...
Unity 3D类结构简介
趁着周末,再来一发.对于Unity3D,我也是刚开始学习,希望能够与大家多多交流.好了,废话不多说,下面继续. 本篇文章使用C#进行举例和说明.关于Unity 3D编辑器中的各种窗口,网上有很多资料了 ...
oracle 远程连接
oracle中如何修改用户名和密码 1.以Windows操作系统为例,打开命令提示符,输入命令sqlplus /nolog ,进入oracle控制台,并输入 conn /as sysdba;以DB ...
指定的经纬度是否落在多边形内 java版
这个想法算法就是判断一个点向左的射线跟一个多边形的交叉点有几个,如果结果为奇数的话那么说明这个点落在多边形中,反之则不在. A: B: C: D: E: no1: no2: y1: y2: 以上的AB ...
报错：Heartbeating to master:7182 failed.
报错背景: cloudera-scm-agent 可以启动并且存活,但是jps没有进程. 报错现象: 查看报错日志:/opt/cm-5.15.1/log/cloudera-scm-agent/clou ...

JavaScript：鼠标拖拽效果

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

随机推荐

热门专题