设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 为何点击后盒子会离鼠标一段距离，而不是随鼠标移动。
返回列表 发新帖
查看: 2805|回复: 5

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

[复制链接]
小黄练编程
发表于 2022-4-4 20:46:11 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>拖拽框</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 a{
  12.                         display:block;
  13.                         text-decoration:none;
  14.                         color:black;
  15.                         text-align:center;
  16.                         font-size:20px;
  17.                         margin:0 auto;
  18.                 }
  19.                 input{
  20.                         display:block;
  21.                         margin:0 auto;
  22.                 }
  23.                 div{
  24.                         width:400px;
  25.                         height:200px;
  26.                         margin:0 auto;
  27.                         border:1px solid gray;
  28.                 }
  29.                 tr{
  30.                         margin-top:20px;
  31.                 }
  32.                 p{
  33.                         width:100px;
  34.                         height:40px;
  35.                         line-height:40px;
  36.                         text-align:center;
  37.                         margin:0 auto;
  38.                 }
  39.                 td{
  40.                         text-align:rigth;
  41.                 }
  42.                 table{
  43.                         background-color:red;
  44.                         margin:0 auto;
  45.                         margin-top:30px;
  46.                 }
  47.                 .div1{
  48.                         position:relative;
  49.                         display:none;
  50.                 }
  51.                 span{
  52.                         position:absolute;
  53.                         top:0;
  54.                         right:0;
  55.                         width:40px;
  56.                         height:40px;
  57.                         text-align:center;
  58.                         line-height:40px;
  59.                         background-color:gray;
  60.                         border-radius:50%;
  61.                         cursor:pointer;
  62.                 }
  63.                 .div1 a{
  64.                         display:block;
  65.                         width:100px;
  66.                         height:40px;
  67.                         line-height:40px;
  68.                         text-align:center;
  69.                         border:1px solid gray;
  70.                         margin:0 auto;
  71.                         margin-top:30px;
  72.                 }
  73.                 </style>
  74.         </head>
  75.         <body>
  76.                 <a  class='a1'href='javascript:;'>点击弹出登录框</a>
  77.                 <div class='div1'>
  78.                         <span>X</span>
  79.                         <p>登入会员</p>
  80.                         <table>
  81.                         <tr><td><label>用户名:</label></td>
  82.                         <td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
  83.                         <tr><td><label><label>登录密码:</label></label></td>
  84.                         <td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
  85.                 </table><a href="javascript:;">登录会员</a>
  86.                         <script>
  87.                         var div1=document.querySelector('.div1');
  88.                         var a1=document.querySelector('.a1');
  89.                         a1.addEventListener('click', function(){
  90.                                 div1.style.display='block';
  91.                         });
  92.                         var span=document.querySelector('span');
  93.                         span.addEventListener('click',function(){
  94.                                 div1.style.display='none';
  95.                         });
  96.                         div1.addEventListener('mousedown',function(e){
  97.                                 var x=e.pageX-div1.offsetLeft;
  98.                                 var y=e.pageY-div1.offsetTop;
  99.                                
  100.                                 document.addEventListener('mousemove',move);
  101.                                     function move(e){
  102.                                         div1.style.top=e.pageY-y+'px';
  103.                                         div1.style.left=e.pageX-x+'px';
  104.                                 };
  105.                                 document.addEventListener('mouseup',function(){
  106.                                         document.removeEventListener('mousemove',move);
  107.                                 });
  108.                         });
  109.                         </script>
  110.                         </div>
  111.         </body>
  112. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-5 23:20:18
小黄练编程 发表于 2022-4-5 23:10
这问题我找到了，但发现还是出现了别的问题，盒子离鼠标有一段距离
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>拖拽框</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 a{
  12.                         display:block;
  13.                         text-decoration:none;
  14.                         color:black;
  15.                         text-align:center;
  16.                         font-size:20px;
  17.                         margin:0 auto;
  18.                 }
  19.                 input{
  20.                         display:block;
  21.                         margin:0 auto;
  22.                 }
  23.                 div{
  24.                         width:400px;
  25.                         height:200px;
  26.                         margin:0 auto;
  27.                         border:1px solid gray;
  28.                 }
  29.                 tr{
  30.                         margin-top:20px;
  31.                 }
  32.                 p{
  33.                         width:100px;
  34.                         height:40px;
  35.                         line-height:40px;
  36.                         text-align:center;
  37.                         margin:0 auto;
  38.                 }
  39.                 td{
  40.                         text-align:rigth;
  41.                 }
  42.                 table{
  43.                         background-color:red;
  44.                         margin:0 auto;
  45.                         margin-top:30px;
  46.                 }
  47.                 .div1{

  49.                         position:absolute;
  50.                         display:none;
  51.                 }
  52.                 span{
  53.                         position:absolute;
  54.                         top:0;
  55.                         right:0;
  56.                         width:40px;
  57.                         height:40px;
  58.                         text-align:center;
  59.                         line-height:40px;
  60.                         background-color:gray;
  61.                         border-radius:50%;
  62.                         cursor:pointer;
  63.                 }
  64.                 .div1 a{
  65.                         display:block;
  66.                         width:100px;
  67.                         height:40px;
  68.                         line-height:40px;
  69.                         text-align:center;
  70.                         border:1px solid gray;
  71.                         margin:0 auto;
  72.                         margin-top:30px;
  73.                 }
  74.                 </style>
  75.         </head>
  76.         <body>
  77.                 <a  class='a1'href='javascript:;'>点击弹出登录框</a>
  78.                 <div class='div1'>
  79.                         <span>X</span>
  80.                         <p>登入会员</p>
  81.                         <table>
  82.                         <tr><td><label>用户名:</label></td>
  83.                         <td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
  84.                         <tr><td><label><label>登录密码:</label></label></td>
  85.                         <td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
  86.                 </table><a href="javascript:;">登录会员</a>
  87.                         <script>
  88.                         var div1=document.querySelector('.div1');
  89.                         var a1=document.querySelector('.a1');
  90.                         a1.addEventListener('click', function(){
  91.                                 div1.style.display='block';
  92.                         });
  93.                         var span=document.querySelector('span');
  94.                         span.addEventListener('click',function(){
  95.                                 div1.style.display='none';
  96.                         });
  97.                         
  98. div1.addEventListener('mousedown',function(e){
  99.                                 
  100.                                 document.addEventListener('mousemove',move);
  101.                                 var y=e.pageY-div1.offsetTop;
  102.                                 var x=e.pageX-div1.offsetLeft;
  103.                                 
  104.                                 function move(e){
  105.                                 console.log(e.pageY-y);
  106.                                         div1.style.top=e.pageY-y+'px';
  107.                                         div1.style.left=e.pageX-x+'px';
  108.                                 };
  109.                                 
  110.                                 document.addEventListener('mouseup',function(){
  111.                                         document.removeEventListener('mousemove',move);
  112.                                 });                             
  113.         
  114.     });

  116.                         </script>
  117.                         </div>
  118.         </body>
  119. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-5 22:25:13 | 显示全部楼层
                .div1{

                        position:absolute;
                        display:none;
                }
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 23:10:44 | 显示全部楼层
ba21 发表于 2022-4-5 22:25
.div1{

                        position:absolute;

这问题我找到了，但发现还是出现了别的问题，盒子离鼠标有一段距离
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-5 23:12:21 | 显示全部楼层
ba21 发表于 2022-4-5 22:25
.div1{

                        position:absolute;
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>拖拽框</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 a{
  12.                         display:block;
  13.                         text-decoration:none;
  14.                         color:black;
  15.                         text-align:center;
  16.                         font-size:20px;
  17.                         margin:0 auto;
  18.                 }
  19.                 input{
  20.                         display:block;
  21.                         margin:0 auto;
  22.                 }
  23.        
  24.                 tr{
  25.                         margin-top:20px;
  26.                 }
  27.                 p{
  28.                         width:100px;
  29.                         height:40px;
  30.                         line-height:40px;
  31.                         text-align:center;
  32.                         margin:0 auto;
  33.                 }


  36.                 td{
  37.                         text-align:right;
  38.                 }

  40.                 table{
  41.                         background-color:red;
  42.                         margin:0 auto;
  43.                         margin-top:30px;
  44.                 }
  45.                 div{
  46.                         position:absolute;
  47.                         left:0;
  48.                         top:0;
  49.                         width:400px;
  50.                         height:200px;
  51.                         margin:0 auto;
  52.                         border:1px solid gray;
  53.                         display:none;
  54.                 }
  55.                 span{
  56.                         position:absolute;
  57.                         top:0;
  58.                         right:0;
  59.                         width:40px;
  60.                         height:40px;
  61.                         text-align:center;
  62.                         line-height:40px;
  63.                         background-color:gray;
  64.                         border-radius:50%;
  65.                         cursor:pointer;
  66.                 }
  67.                 .div1 a{
  68.                         display:block;
  69.                         width:100px;
  70.                         height:40px;
  71.                         line-height:40px;
  72.                         text-align:center;
  73.                         border:1px solid gray;
  74.                         margin:0 auto;
  75.                         margin-top:30px;
  76.                 }
  77.                 </style>
  78.         </head>
  79.         <body>
  80.                 <a  class='a1'href='javascript:;'>点击弹出登录框</a>
  81.                 <div class='div1'>
  82.                         <span>X</span>
  83.                         <p>登入会员</p>
  84.                         <table>
  85.                         <tr><td><label>用户名:</label></td>
  86.                         <td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
  87.                         <tr><td><label><label>登录密码:</label></label></td>
  88.                         <td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
  89.                 </table><a href="javascript:;">登录会员</a>
  90.                         <script>
  91.                         var div1=document.querySelector('.div1');
  92.                         var a1=document.querySelector('.a1');
  93.                         a1.addEventListener('click', function(){
  94.                                 div1.style.display='block';
  95.                         });
  96.                         var span=document.querySelector('span');
  97.                         span.addEventListener('click',function(){
  98.                                 div1.style.display='none';
  99.                                 div1.style.cursor='move';
  100.                         });
  101.                         div1.addEventListener('mousedown',function(e){
  102.                                 var x=e.pageX-div1.offsetLeft;//x值为鼠标距离盒子的距离
  103.                                 var y=e.pageY-div1.offsetTop;
  104.                                 div1.style.cursor='Move';
  105.                                 document.addEventListener('mousemove',move);
  106.                                     function move(e){
  107.                                         div1.style.top=e.pageY-y-(div1.offsetHeight/2)+'px';
  108.                                         div1.style.left=e.pageX-x-(div1.offsetWidth/2)+'px';//用鼠标在页面的距离减去鼠标离盒子的距离得到模态框的值。
  109.                                     console.log(e.pageY);
  110.                                 };
  111.                                 document.addEventListener('mouseup',function(){
  112.                                         document.removeEventListener('mousemove',move);
  113.                                         div1.style.cursor=null;
  114.                                 });
  115.                         });
  116.                         </script>
  117.                         </div>
  118.         </body>
  119. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-5 23:20:18 | 显示全部楼层    本楼为最佳答案   
小黄练编程 发表于 2022-4-5 23:10
这问题我找到了，但发现还是出现了别的问题，盒子离鼠标有一段距离
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>拖拽框</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 a{
  12.                         display:block;
  13.                         text-decoration:none;
  14.                         color:black;
  15.                         text-align:center;
  16.                         font-size:20px;
  17.                         margin:0 auto;
  18.                 }
  19.                 input{
  20.                         display:block;
  21.                         margin:0 auto;
  22.                 }
  23.                 div{
  24.                         width:400px;
  25.                         height:200px;
  26.                         margin:0 auto;
  27.                         border:1px solid gray;
  28.                 }
  29.                 tr{
  30.                         margin-top:20px;
  31.                 }
  32.                 p{
  33.                         width:100px;
  34.                         height:40px;
  35.                         line-height:40px;
  36.                         text-align:center;
  37.                         margin:0 auto;
  38.                 }
  39.                 td{
  40.                         text-align:rigth;
  41.                 }
  42.                 table{
  43.                         background-color:red;
  44.                         margin:0 auto;
  45.                         margin-top:30px;
  46.                 }
  47.                 .div1{

  49.                         position:absolute;
  50.                         display:none;
  51.                 }
  52.                 span{
  53.                         position:absolute;
  54.                         top:0;
  55.                         right:0;
  56.                         width:40px;
  57.                         height:40px;
  58.                         text-align:center;
  59.                         line-height:40px;
  60.                         background-color:gray;
  61.                         border-radius:50%;
  62.                         cursor:pointer;
  63.                 }
  64.                 .div1 a{
  65.                         display:block;
  66.                         width:100px;
  67.                         height:40px;
  68.                         line-height:40px;
  69.                         text-align:center;
  70.                         border:1px solid gray;
  71.                         margin:0 auto;
  72.                         margin-top:30px;
  73.                 }
  74.                 </style>
  75.         </head>
  76.         <body>
  77.                 <a  class='a1'href='javascript:;'>点击弹出登录框</a>
  78.                 <div class='div1'>
  79.                         <span>X</span>
  80.                         <p>登入会员</p>
  81.                         <table>
  82.                         <tr><td><label>用户名:</label></td>
  83.                         <td><input type='text' id='text' placeholder='请输入用户名'></td></tr>
  84.                         <tr><td><label><label>登录密码:</label></label></td>
  85.                         <td><input type='password' id='password' placeholder="请输入登入密码"></td></tr>
  86.                 </table><a href="javascript:;">登录会员</a>
  87.                         <script>
  88.                         var div1=document.querySelector('.div1');
  89.                         var a1=document.querySelector('.a1');
  90.                         a1.addEventListener('click', function(){
  91.                                 div1.style.display='block';
  92.                         });
  93.                         var span=document.querySelector('span');
  94.                         span.addEventListener('click',function(){
  95.                                 div1.style.display='none';
  96.                         });
  97.                         
  98. div1.addEventListener('mousedown',function(e){
  99.                                 
  100.                                 document.addEventListener('mousemove',move);
  101.                                 var y=e.pageY-div1.offsetTop;
  102.                                 var x=e.pageX-div1.offsetLeft;
  103.                                 
  104.                                 function move(e){
  105.                                 console.log(e.pageY-y);
  106.                                         div1.style.top=e.pageY-y+'px';
  107.                                         div1.style.left=e.pageX-x+'px';
  108.                                 };
  109.                                 
  110.                                 document.addEventListener('mouseup',function(){
  111.                                         document.removeEventListener('mousemove',move);
  112.                                 });                             
  113.         
  114.     });

  116.                         </script>
  117.                         </div>
  118.         </body>
  119. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

一二三打老虎
发表于 2022-5-11 12:30:58 From FishC Mobile | 显示全部楼层
把移动盒子的定位改成fixed
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-18 17:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表