Bei瓜 2022-05-15 09:31 采纳率: 80%
浏览 25
已结题

关于js拖拽位置出错的问题

问题遇到的现象和发生背景
问题相关代码,请勿粘贴截图
<style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 60px;
                height: 40px;
                background-color: skyblue;
                font-size: 20px;
                text-align: center;
                line-height: 40px;
                border-radius: 10px;
                margin: 100px auto;
                cursor: pointer;
            }
            .model-box{
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: gray;
                opacity: 0.6;
                box-sizing: border-box;
            }
            .model-box .content-box{
                position: fixed;
                width: 500px;
                height: 300px;
                box-sizing: border-box;
                background-color: white;
                box-shadow: 10px 10px 10px black;
                border-radius: 10px;
            }
            .content-box form{
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 50px 70px;
                box-sizing: border-box;
            }
            .content-box form label {
                font-weight: bold;
                margin: 10px 0px 10px 0px;
            }
            .content-box form input{
                outline: none;
                width: 300px;
                height: 40px;
                font-size: 20px;
                padding: 0px 10px;
            }
            .content-box button{
                position: absolute;
                display: block;
                width: 100px;
                height: 50px;
                border: none;
                background-color: skyblue;
                border-radius: 10px;
                float: right;
                top: 80%;
                left: 35%;
                cursor: pointer;
            }
            .content-box button:hover{
                transition: all .3s;
                background-color: blue;
                color: white;
            }
            .content-box .close{
                float: right;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: white;
                box-shadow: 0px 0px 10px gray;
                text-align: center;
                line-height: 40px;
                margin: 10px 20px;
                cursor: pointer;
            }
            .content-box .close:hover{
                transition: all .3s;
                background-color: blue;
                color: white;
            }
        </style>

<div class="box">登录</div>
        <div class="model-box">
            <div class="content-box">
                <div class="close">X</div>
                <form action="">
                <label for="">用户名:</label>
                <input type="text">
                <label for="">密码:</label>
                <input type="password">
                </form>
                <button>登录</button>
            </div>
        </div>
const box = document.querySelector('.box')
            const model = document.querySelector('.model-box')
            const closeModel = document.querySelector('.close')
            const content = document.querySelector('.content-box')
            const title = document.querySelector('.title')
            // 注册事件
            box.addEventListener('click',()=>{
                model.style.display = 'block'
                closeModel.addEventListener('click',()=>{
                    model.style.display = 'none'
                })
            })
            content.addEventListener('mousedown',(e)=>{
                const x = e.pageX - content.offsetLeft
                const y = e.pageX - content.offsetTop
                document.addEventListener('mousemove',move)
                function move(e){
                    const moveX = e.pageX - x 
                    const moveY = e.pageY - y 
                    content.style.left = moveX +'px'
                    content.style.top = moveY +'px'
                }
                document.addEventListener('mouseup',function(){
                    document.removeEventListener('mousemove',move)
                })
            })
        </script>

运行结果及报错内容

在登录页面中点下但不松开,然后页面会跳到鼠标上面去,然后松开,再次在页面中重复此操作,页面离鼠标的位置会越来越远

我的解答思路和尝试过的方法

修改css中的top值,增加title标签进行拖拽操作

我想要达到的结果

页面不会乱跳,鼠标始终在页面中

展开全部

  • 写回答

1条回答 默认 最新

  • 渣男 2022-05-15 16:05
    关注

    img

    这里的参数写错了 应该用

    const y = e.pageY - content.offsetTop
    

    还有和建议 这两条属性替换成这个 不然你的主页面的登录按钮会显示出来

    img

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    Bei瓜 2022-05-15 19:04

    谢谢了兄弟😁

    回复
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 5月23日
  • 已采纳回答 5月15日
  • 创建了问题 5月15日

悬赏问题

  • ¥15 centos7.6进不去系统,卡在数字7界面
  • ¥15 Tensorflow采用interpreter.allocate_tensors()分配内存出现ValueError: vector too long报错
  • ¥15 使用CGenFF在线生成血红素辅基拓扑结构遇到问题
  • ¥15 在fragment使用okhttp同步上传文件,能不能在fragment销毁后还可以继续上传文件?
  • ¥20 matlab代码实现可达矩阵形成骨骼矩阵
  • ¥15 关于地板的木纹和图库中的匹配的
  • ¥30 机器学习预测疾病模型流程疑问
  • ¥50 2048Python实现
  • ¥15 使用ads进行低噪放仿真没有结果且不报错
  • ¥15 关于#python#的问题:有偿求一个千寻框架找书机器人插件
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部