<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>拖动模态框</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ position: relative; width: 596px; height: 396px; background-color: pink; border: 2px solid #333; margin: 100px auto; } #titl{ position: absolute; width: 100%; height: 60px; background-color: orange; color: #333333; font-size: 26px; line-height: 60px; text-align: center; font-weight: 700; } #tex{ position: absolute; width: 100%; height: 336px; top: 60px; /*background-color: olive;*/ font-size: 18px; } #tex ul li{ width: 560px; height: 70px; /*background-color: palegreen;*/ line-height: 70px; margin-top: 40px; list-style-type: none; margin-left: 20px; } #tex input{ width: 400px; height: 40px; } </style> </head> <body> <div id="box"> <div id="titl"> 用户登录 </div> <div id="tex"> <ul> <li>用户名：<input type="text" id="ipt1" placeholder="输入用户名"/> </li> <li>密 码：<input type="password" id="ipt2" placeholder="输入密码"/></li> </ul> </div> </div> <script type="text/javascript"> var titl=document.getElementById('titl'); var box=document.getElementById('box') // 鼠标按下时,获取鼠标在盒子内的坐标 titl.addEventListener('mousedown',function(e){ var boxLeft=box.offsetLeft; //盒子距离左侧外层边框的距离 // console.log(titlLeft) var boxTop=box.offsetTop; //盒子距离上面外层边框的距离 var eLeft=e.pageX; //鼠标距离最左边 var eTop=e.pageY; //鼠标距离最上边 var Le=eLeft-boxLeft; //鼠标距离盒子左边缘的距离 var Te=eTop-boxTop; // 随时赋值 document.addEventListener('mousemove',move) function move(e){ box.style.marginLeft=e.pageX-Le+'px' box.style.marginTop=e.pageY-Te+'px' } document.addEventListener('mouseup',function(){ document.removeEventListener('mousemove',move) }) }) </script> </body> </html>