Demo登录框的可拖拽 原生与jQuery两种办法实现教程

demo登录框的可拖拽（原生与jquery两种办法实现）

此处不考虑兼容性问题,因为在ie8及其以下的版本中不支持事件对象的page坐标系列。所以我们直接使用元素的page系列坐标。

需求：
// 1.点击登录按钮,让登录盒子显示在页面上,同时出现遮罩层
// 2.点击登录盒子的关闭按钮,登录盒子消失
// 3.登录盒子可拖拽

思路分析：这里的重点是第三步登录盒子的可拖拽，具体思路如下图：

我们解决盒子拖拽的思路就是：因为红线的距离是一直不变的，所以，可以先求出来定义为x,y；而在整个页面中注册鼠标移动事件，这样就可以求出在页面上触发点的e.pagex,利用e.pagex - x 这样就可以求出盒子的offsetleft值，这个值就是元素的left值，最后将这个值赋给元素的left属性就可以了。喎?https: www.2cto.com/kf/ware/vc/"="" target="_blank" class="keylink">vcd4ncjxwprwxylva78pm09dbvbj2zsrm4qo6pgjyic8+dqoxltsqy9ixvsnt09btyxjnaw7k9nduo788yniglz4ncjiuupjss8pmzo2808hl0ru49srzsersxravysk8/qosxmfdtnta0rpd5snptctizrrozrvww9lgtq+jrla8u+hiw2xvz2luutdx07/jzc/xp8lwo788l3a+dqo8cd48aw1nigfsdd0="这里写图片描述" src="https://www.2cto.com/uploadfile/collfiles/20180820/20180820095619120.png" title="\" />

先说第一个问题：
当元素有margin属性的时候，我们如果直接将offsetleft = e.pagex - 红线的距离赋值给元素的left属性，此时定位的left属性与margin-left的值会发生叠加计算得到一个新的值，此时才是盒子距离页面左边的位置。所以我们要将margin的值也考虑到计算进去，最后计算出来的offsetleft的值就是盒子的真实距离。

offsetleft = e.pagex - （-256px）（magin-left的值） - 红线的位置 ;整体赋值给left,因为页面又有：
margin-left = -256px; 所以两者叠加后就是真正的offsetleft的值。

再说第二个问题：
2.给页面添加了一个鼠标移动事件，那么在页面上的任何位置上移动，都会让login盒子可拖拽吗？换句话说，因为在整个页面注册了onmousemove事件，那么在整个页面移动，盒子都会拖动起来吗？

肯定不是的，这是因为我们注册的事件的是又两个：
第一个：给login盒子的头部区域title,注册了一个鼠标按下事件。
第二个：在第一个事件函数的里面，又注册了一个整个页面的鼠标移动事件。

也就可以这样理解：只有我按下登录盒子的头部后，并且鼠标停留在上面，此时就可以拖动盒子在整个页面上移动。

代码实现：

登录会员 关闭

用户名：

登录密码：

 

<script> //需求: // 1.点击登录按钮,让登录盒子显示在页面上,同时出现遮罩层 // 2.点击登录盒子的关闭按钮,登录盒子消失 // 3.登录盒子可拖拽 //获取元素 var loginbtn = document.getelementbyid("link"); //登录按钮 var login = document.getelementbyid("login"); //登录盒子 var closelogin = document.getelementsbyclassname("close-login")[0]; //关闭登录盒子的按钮 var bg = document.getelementbyid('bg'); //遮罩层 var title = document.getelementbyid('title'); //头部 loginbtn.onclick = function(){ //点击登录按钮的时候,弹出登录框 login.style.display= "block"; //打开遮罩层 bg.style.display = "block"; } closelogin.onclick = function(){ //点击关闭按钮,登录框隐藏 login.style.display = "none"; //打开遮罩层 bg.style.display = "none"; } //可以按住拖拽的部分title //当然也可以给整登录盒子 login盒子注册一个按下事件 title.onmousedown = function(e){ //1.获取红线的距离 var x = e.pagex - login.offsetleft; var y = e.pagey - login.offsettop; //给整个页面添加鼠标移动事件 document.onmousemove = function (e){ //计算此时登录盒子在页面当中的位置 login.style.left = e.pagex - x + 256 + "px"; login.style.top = e.pagey - y - 140 + "px"; } } title.onmouseup = function(){ //当鼠标弹起时将页面的鼠标移动事件清空就可以了 document.onmousemove = null; } </script>

jquery代码实现：
思路都是一样，只需要将上面的代码翻译为jquery的代码来实现就可以了。

<script src="jquery-1.12.4.js"></script>
<script>
    $(function(){

        $('#link').on("click",function(){
            $('#login').show();
            $('#bg').show();
        })

        $('.close-login').on('click',function(){
            $('#login').hide();
            $('#bg').hide();
        })

        $('#title').on('mousedown',function(e){
            //获取红线的距离          
            var x = e.pagex - $('#login').offset().left;
            var y = e.pagex - $('#login').offset().top; 

            $("body").on('mousemove',function(e){    
                console.log(e.target);

                // //计算login盒子left以及top的值
                var leftx = e.pagex + 256 - x + 'px';
                var topy = e.pagey - 140 - y + 'px';

                $('#login').css('left',leftx);
                $('#login').css('top',topy);
            })              
        })


        $('#title').on('mouseup',function(){
            //这里利用事件的解绑
            $('body').off('mousemove');
        })
    })
</script>

喎?https:>