当前位置 一点新作 其他 正文 下一篇:

原生js实现登陆框拖拽效果

摘要:拖拽案例也是js的必学涉及到的也比较多,曾经看过百度弹出登陆框,可以自由拖拽,那么此次分享的就是实现简单拖拽的登陆框,涉及到的具体函数只是就不一一解释了。具体的介绍一下实施思路。


具体实施代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            a{text-decoration: none;}
            #box{width: 300px; height:220px; border: 1px solid #8B8B7A;  position:absolute; font-size: 14px;left: 40%; top:200px;z-index: 999;background: #fff;}
            #drt{height: 30px;background-color: #ccc; text-align: center; color: #fff; cursor: move;margin-bottom: 15px;}
            #box label{display: inline-block; width: 90px; margin: 10px 0px; text-align: right;}
            #box input[type=text],#box input[type=password]{width: 150px; height:20px; border-radius:3px; border: 1px solid #ccc;}
            #box input[type=submit]{width:180px; height: 25px;background: #ccc; border: none;border-radius:3px; margin:10px 23%; color: #fff; cursor: pointer;}
            #box p{text-align: right; margin-right: 30px;}
        </style>
    </head>
    <body>
        <div id="box">
            <div id="drt"><big>用户登陆</big>&nbsp;这里拖拽哦~</div>
            <form action="" method="post">
                <label for="UserName">用户名:</label>
                <input type="text" id="UserName" name="username">
                <label for="UserPwd">&nbsp;&nbsp;码:</label>
                <input type="password" id="UserPwd" name="userpwd">
                <input type="submit" id="send" value="登陆" />
            </form>
            <p>其他<a href="#">登陆方式&raquo;</a></p>
        </div>
        <script>
            //获取节点
            var box = document.getElementById("box"),
                drt = document.getElementById("drt")
            //鼠标移入盒子内  鼠标的位置
            drt.onmousedown = function (e){
                //鼠标点击时获取当前鼠标坐标值作为鼠标起始值
                var oEvent = e || event,
                MopX = oEvent.clientX,
                MopY = oEvent.clientY;
                //获取盒子起始位置
                    var ro = this.getBoundingClientRect(),
                    BopY = ro.top,  //盒子头部外边距距离起始位置
                    BopX = ro.left;
                //鼠标移动事件
                document.onmousemove = function (e){
                    //当前鼠标 移动事件对象
                    var oEvent = e || event;
                    //盒子移动位置 = 鼠标位置增量+盒子起始位置
                        //鼠标增量 = 鼠标移动后位置 - 鼠标起始位置
                        box.style.left = (oEvent.clientX-MopX+BopX)+"px" ;
                        box.style.top = (oEvent.clientY-MopY+BopY)+"px";
                        //console.log(oEvent.clientX)
                };
            };
            //按键松开时使用null取代移动后面的函数 ,实现松开鼠标,div不再移动
             document.onmouseup = function(){
                document.onmousemove = null;   //null
            };  
        </script>
    </body>
</html>
实施前思路:
  1. 盒子的初始位置,以至于后面二次拖拽后变动的二次位置都将记录,都将作为盒子拖拽移动的起始位置。
  2. 鼠标位置从点击开始记录起始位置(包括二次移动后位置),然后在根据移动后记录鼠标位置X值、Y值的增量值(鼠标移动增量=鼠标为移动后-鼠标起始位置),那么盒子的无缝移动=盒子的起始位置+鼠标移动的X、Y的增量值。

至此文章再次结束,有更好的建议,望指教!

非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:https://ydxinzuo.cn/archives/874

作者: xinyuan7630

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部