为何点击后盒子会离鼠标一段距离，而不是随鼠标移动。,Web开发,技术交流,鱼C论坛

小黄练编程 发表于 2022-4-4 20:46:11

为何点击后盒子会离鼠标一段距离，而不是随鼠标移动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽框</title>
<style>
*{
padding:0;
margin:0;
}
a{
display:block;
text-decoration:none;
color:black;
text-align:center;
font-size:20px;
margin:0 auto;
}
input{
display:block;
margin:0 auto;
}
div{
width:400px;
height:200px;
margin:0 auto;
border:1px solid gray;
}
tr{
margin-top:20px;
}
p{
width:100px;
height:40px;
line-height:40px;
text-align:center;
margin:0 auto;
}
td{
text-align:rigth;
}
table{
background-color:red;
margin:0 auto;
margin-top:30px;
}
.div1{
position:relative;
display:none;
}
span{
position:absolute;
top:0;
right:0;
width:40px;
height:40px;
text-align:center;
line-height:40px;
background-color:gray;
border-radius:50%;
cursor:pointer;
}
.div1 a{
display:block;
width:100px;
height:40px;
line-height:40px;
text-align:center;
border:1px solid gray;
margin:0 auto;
margin-top:30px;
}
</style>
</head>
<body>
<aclass='a1'href='javascript:;'>点击弹出登录框</a>
<div class='div1'>
<span>X</span>
<p>登入会员</p>
<table>
<tr><td><label>用户名:</label></td>
<td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
<tr><td><label><label>登录密码:</label></label></td>
<td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
</table><a href="javascript:;">登录会员</a>
<script>
var div1=document.querySelector('.div1');
var a1=document.querySelector('.a1');
a1.addEventListener('click', function(){
div1.style.display='block';
});
var span=document.querySelector('span');
span.addEventListener('click',function(){
div1.style.display='none';
});
div1.addEventListener('mousedown',function(e){
var x=e.pageX-div1.offsetLeft;
var y=e.pageY-div1.offsetTop;

document.addEventListener('mousemove',move);
function move(e){
div1.style.top=e.pageY-y+'px';
div1.style.left=e.pageX-x+'px';
};
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
});
});
</script>
</div>
</body>
</html>

ba21 发表于 2022-4-5 22:25:13

            .div1{

                     position:absolute;
                     display:none;
            }

小黄练编程 发表于 2022-4-5 23:10:44

ba21 发表于 2022-4-5 22:25
.div1{

position:absolute;

这问题我找到了，但发现还是出现了别的问题，盒子离鼠标有一段距离

小黄练编程 发表于 2022-4-5 23:12:21

ba21 发表于 2022-4-5 22:25
.div1{

                     position:absolute;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽框</title>
<style>
*{
padding:0;
margin:0;
}
a{
display:block;
text-decoration:none;
color:black;
text-align:center;
font-size:20px;
margin:0 auto;
}
input{
display:block;
margin:0 auto;
}

tr{
margin-top:20px;
}
p{
width:100px;
height:40px;
line-height:40px;
text-align:center;
margin:0 auto;
}

td{
text-align:right;
}

table{
background-color:red;
margin:0 auto;
margin-top:30px;
}
div{
position:absolute;
left:0;
top:0;
width:400px;
height:200px;
margin:0 auto;
border:1px solid gray;
display:none;
}
span{
position:absolute;
top:0;
right:0;
width:40px;
height:40px;
text-align:center;
line-height:40px;
background-color:gray;
border-radius:50%;
cursor:pointer;
}
.div1 a{
display:block;
width:100px;
height:40px;
line-height:40px;
text-align:center;
border:1px solid gray;
margin:0 auto;
margin-top:30px;
}
</style>
</head>
<body>
<aclass='a1'href='javascript:;'>点击弹出登录框</a>
<div class='div1'>
<span>X</span>
<p>登入会员</p>
<table>
<tr><td><label>用户名:</label></td>
<td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
<tr><td><label><label>登录密码:</label></label></td>
<td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
</table><a href="javascript:;">登录会员</a>
<script>
var div1=document.querySelector('.div1');
var a1=document.querySelector('.a1');
a1.addEventListener('click', function(){
div1.style.display='block';
});
var span=document.querySelector('span');
span.addEventListener('click',function(){
div1.style.display='none';
div1.style.cursor='move';
});
div1.addEventListener('mousedown',function(e){
var x=e.pageX-div1.offsetLeft;//x值为鼠标距离盒子的距离
var y=e.pageY-div1.offsetTop;
div1.style.cursor='Move';
document.addEventListener('mousemove',move);
   function move(e){
div1.style.top=e.pageY-y-(div1.offsetHeight/2)+'px';
div1.style.left=e.pageX-x-(div1.offsetWidth/2)+'px';//用鼠标在页面的距离减去鼠标离盒子的距离得到模态框的值。
   console.log(e.pageY);
};
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
div1.style.cursor=null;
});
});
</script>
</div>
</body>
</html>

ba21 发表于 2022-4-5 23:20:18

小黄练编程发表于 2022-4-5 23:10
这问题我找到了，但发现还是出现了别的问题，盒子离鼠标有一段距离

<!DOCTYPE html>
<html>
   <head>
            <meta charset="utf-8">
            <title>拖拽框</title>
            <style>
            *{
                     padding:0;
                     margin:0;
            }
            a{
                     display:block;
                     text-decoration:none;
                     color:black;
                     text-align:center;
                     font-size:20px;
                     margin:0 auto;
            }
            input{
                     display:block;
                     margin:0 auto;
            }
            div{
                     width:400px;
                     height:200px;
                     margin:0 auto;
                     border:1px solid gray;
            }
            tr{
                     margin-top:20px;
            }
            p{
                     width:100px;
                     height:40px;
                     line-height:40px;
                     text-align:center;
                     margin:0 auto;
            }
            td{
                     text-align:rigth;
            }
            table{
                     background-color:red;
                     margin:0 auto;
                     margin-top:30px;
            }
            .div1{

                     position:absolute;
                     display:none;
            }
            span{
                     position:absolute;
                     top:0;
                     right:0;
                     width:40px;
                     height:40px;
                     text-align:center;
                     line-height:40px;
                     background-color:gray;
                     border-radius:50%;
                     cursor:pointer;
            }
            .div1 a{
                     display:block;
                     width:100px;
                     height:40px;
                     line-height:40px;
                     text-align:center;
                     border:1px solid gray;
                     margin:0 auto;
                     margin-top:30px;
            }
            </style>
   </head>
   <body>
            <aclass='a1'href='javascript:;'>点击弹出登录框</a>
            <div class='div1'>
                     <span>X</span>
                     <p>登入会员</p>
                     <table>
                     <tr><td><label>用户名:</label></td>
                     <td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
                     <tr><td><label><label>登录密码:</label></label></td>
                     <td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
            </table><a href="javascript:;">登录会员</a>
                     <script>
                     var div1=document.querySelector('.div1');
                     var a1=document.querySelector('.a1');
                     a1.addEventListener('click', function(){
                           div1.style.display='block';
                     });
                     var span=document.querySelector('span');
                     span.addEventListener('click',function(){
                           div1.style.display='none';
                     });

div1.addEventListener('mousedown',function(e){

                           document.addEventListener('mousemove',move);
                           var y=e.pageY-div1.offsetTop;
                           var x=e.pageX-div1.offsetLeft;

                           function move(e){
                           console.log(e.pageY-y);
                                    div1.style.top=e.pageY-y+'px';
                                    div1.style.left=e.pageX-x+'px';
                           };

                           document.addEventListener('mouseup',function(){
                                    document.removeEventListener('mousemove',move);
                           });

});

                     </script>
                     </div>
   </body>
</html>

一二三打老虎 发表于 2022-5-11 12:30:58

把移动盒子的定位改成fixed

页: [1]

鱼C论坛's Archiver

为何点击后盒子会离鼠标一段距离，而不是随鼠标移动。