JS如何实现简单可拖动的模态框
导读：本文共3686字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 简单版本效果图：实现思路：给可拖动部分添加点击事件，触发时计算鼠标在可拖动部分中的坐标（ e.pageX - box.offsetLeft ），得到 x y 。给 document 添加鼠标移动事件，因为当鼠标拖动模态框的时候，是在整个DOM窗口内移动的。保持鼠标与模态框的相对位置不变，所以需要计算此时的模态框的位置（e.pageX - x ），进而修改模态框位... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。简单版本
效果图：
实现思路：
给可拖动部分添加点击事件，触发时计算鼠标在可拖动部分中的坐标（ e.pageX - box.offsetLeft ），得到 x y 。
给 document 添加鼠标移动事件，因为当鼠标拖动模态框的时候，是在整个DOM窗口内移动的。保持鼠标与模态框的相对位置不变，所以需要计算此时的模态框的位置（e.pageX - x ），进而修改模态框位置。此时的 e.pageX 已经发生变化，跟上述的 e.pageX 是不相等的。
当鼠标弹起时，清除移动事件即可。
代码注意点：
1 offsetWidth 这类offset属性是只读属性，不能通过对其进行赋值来修改元素。
2 使用 style.top、style.left 的元素必须有定位，且在给这两个属性赋值的时候必须要在末尾加上单位 'px' 。
3 代码中 mousemove 事件回调函数的参数 e 不能省略，如果省略则会使用外部的 e，即 mousedown 事件回调函数中的 e，因此得到的鼠标坐标是错误的。
代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><!--使用style修改样式--><style>.box{position:absolute;height:200px;width:200px;background-color:plum;}.title{width:100%;height:50px;background-color:rosybrown;cursor:move;/*让文字不可选中*/-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}</style></head><body><divclass="box"><divclass="title">head部分</div></div><script>varbox=document.querySelector('.box');vartitle=document.querySelector('.title');title.addEventListener('mousedown',function(e){//获取鼠标在box内的坐标值varx=e.pageX-box.offsetLeft;vary=e.pageY-box.offsetTop;document.addEventListener('mousemove',move);functionmove(e){box.style.left=e.pageX-x+'px';box.style.top=e.pageY-y+'px';}document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',move);})})</script></body></html>复杂版本
效果图：
实现思路：
跟简单版本大体相同
实现代码：
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>拖动模态框</title><style>.login-header{width:100%;text-align:center;height:30px;font-size:24px;line-height:30px;}ul,li,ol,dl,dt,dd,div,p,span,h2,h3,h4,h5,h6,h7,a{padding:0px;margin:0px;}.login{display:none;width:512px;height:280px;position:fixed;border:#ebebebsolid1px;left:50%;top:50%;background:#ffffff;box-shadow:0px0px20px#ddd;z-index:9999;transform:translate(-50%,-50%);}.login-title{width:100%;margin:10px0px0px0px;text-align:center;line-height:40px;height:40px;font-size:18px;position:relative;cursor:move;}.login-input-content{margin-top:20px;}.login-button{width:50%;margin:30pxauto0pxauto;line-height:40px;font-size:14px;border:#ebebeb1pxsolid;text-align:center;}.login-bg{display:none;width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,.3);}a{text-decoration:none;color:#000000;}.login-buttona{display:block;}.login-inputinput.list-input{float:left;line-height:35px;height:35px;width:350px;border:#ebebeb1pxsolid;text-indent:5px;}.login-input{overflow:hidden;margin:0px0px20px0px;}.login-inputlabel{float:left;width:90px;padding-right:10px;text-align:right;line-height:35px;height:35px;font-size:14px;}.login-titlespan{position:absolute;font-size:12px;right:-20px;top:-30px;background:#ffffff;border:#ebebebsolid1px;width:40px;height:40px;border-radius:20px;}</style></head><body><divclass="login-header"><aid="link"href="javascript:;">点击，弹出登录框</a></div><divid="login"class="login"><divid="title"class="login-title">登录会员<span><aid="closeBtn"href="javascript:void(0);"class="close-login">关闭</a></span></div><divclass="login-input-content"><divclass="login-input"><label>用户名：</label><inputtype="text"placeholder="请输入用户名"name="info[username]"id="username"class="list-input"></div><divclass="login-input"><label>登录密码：</label><inputtype="password"placeholder="请输入登录密码"name="info[password]"id="password"class="list-input"></div></div><divid="loginBtn"class="login-button"><ahref="javascript:void(0);"id="login-button-submit">登录会员</a></div></div><!--遮盖层--><divid="bg"class="login-bg"></div><script>//1.获取元素varlogin=document.querySelector('.login');varmask=document.querySelector('.login-bg');varlink=document.querySelector('#link');varcloseBtn=document.querySelector('#closeBtn');vartitle=document.querySelector('#title');//2.点击弹出层这个链接link让mask和login显示出来link.addEventListener('click',function(){mask.style.display='block';login.style.display='block';})//3.点击closeBtn就隐藏mask和logincloseBtn.addEventListener('click',function(){mask.style.display='none';login.style.display='none';})//4.开始拖拽//(1)当我们鼠标按下，就获得鼠标在盒子内的坐标title.addEventListener('mousedown',function(e){varx=e.pageX-login.offsetLeft;vary=e.pageY-login.offsetTop;//(2)鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener('mousemove',move)functionmove(e){login.style.left=e.pageX-x+'px';login.style.top=e.pageY-y+'px';}//(3)鼠标弹起，就让鼠标移动事件移除document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',move);})})</script></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JS如何实现简单可拖动的模态框的详细内容，希望对您有所帮助，信息来源于网络。