需求：在指定位置按住鼠标左键移动对话框
分析：鼠标按下(获取鼠标在盒子中的位置)。触动事件(获取鼠标的位置)，移动在更换对话框的位置(盒子在页面中的位置=鼠标的位置-鼠标在盒子中 的距离)
鼠标按下onmousedown 鼠标弹起：onmouseup ?鼠标移动：onmousemove
步骤：
1.老三步和新五步
2.把鼠标的坐标赋值给对话框，禁止文本选中
<!DOCTYPE html><html><head><meta charset="utf-8"> ???<title></title><style type="text/css">*{ ???margin: 0; ???padding: 0;}.nav{ ???height: 30px; ???background: #036663; ???border-bottom: 1px solid #369; ???line-height: 30px; ???padding-left: 30px;}.nav a{ ???color: #fff; ???text-align: center; ???font-size: 14px; ???text-decoration: none;}.d-box{ ???width:400px; ???height: 300px; ???border:2px solid #036663; ???box-shadow: 2px 2px 2px 2px #666; ???position: absolute; ???top: 40%; ???left: 40%;}.hd{ ???width: 100%; ???height: 25px; ???background-color: #036663; ???border-bottom: 1px solid #369; ???line-height: 25px; ???color: white; ???cursor: move;}#box_close{ ???float: right; ???cursor:pointer;}</style></head><body><!-- 顶部注册部分，无用 --><div class="nav"><a href="#" id="register">注册信息</a></div><!-- 我们移动的对话框 --><div class="d-box" id="d_box"> ???<div class="hd" id="drop"> ???????<i>注册信息(可拖拽)</i> ???????<span id="box_close">【关闭】</span> ???</div> ???<div class="bd"></div></div><script type="text/javascript">window.onload = function(){//需求：在指定位置按住鼠标左键移动对话框 ???//分析：鼠标按下。触动事件，移动在更换对话框的位置 ???//鼠标按下onmousedown 鼠标弹起：onmouseup ?鼠标移动：onmousemove ???//步骤： ???//1.老三步和新五步 ???//2.把鼠标的坐标赋值给对话框 ???????????//1.老三步和新五步var box = document.getElementById("d_box");var drop = document.getElementById("drop");//鼠标按下,再移动对话框drop.onmousedown = function(event){//先获取鼠标在盒子中的位置，在将来移动的时候减去，以保证鼠标在盒子中的位置event = event || window.event;//兼容获取的事件对象var pagex = event.pageX || scroll().left + event.clientX;//鼠标的位置var pagey = event.pageY || scroll().top + event.clientY;var mousedivx = pagex - box.offsetLeft;//鼠标在盒子中的位置var mousedivy = pagey - box.offsetTop; ??document.onmousemove = function(event){event = event || window.event;//鼠标的位置var mousex = event.pageX || scroll().left + event.clientX;var mousey = event.pageY || scroll().top + event.clientY;//二次处理鼠标的位置mousex = mousex -mousedivx;mousey = mousey - mousedivy;//给box赋值box.style.left = mousex +"px";box.style.top = mousey +"px";//禁止选中文本框window.getSelection?window.getSelection().removeAllRanges():document.selection().empty(); ????} }//鼠标松开，解绑事件drop.onmouseup = function(){ ???document.onmousemove = null;}}</script></body></html>JS之拖拽案例
原文地址：https://www.cnblogs.com/creazybeauty/p/8183598.html