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

鱼C论坛

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

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

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

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

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

x 
<!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>
                <a  class='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 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>
                <a  class='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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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

                        position:absolute;
                        display:none;
                }
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

                        position:absolute;

这问题我找到了，但发现还是出现了别的问题，盒子离鼠标有一段距离
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 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>
                <a  class='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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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>
                <a  class='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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

一二三打老虎
发表于 2022-5-11 12:30:58 From FishC Mobile | 显示全部楼层
把移动盒子的定位改成fixed
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-12-22 18:48

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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