复制代码，可间接运行查看成果，关键处已正文阐明，心愿对你有所帮忙。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可拖动弹窗</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <style> body {background: #f5f5f5; font-size: 14px; color: #333; } .dialog_btn_wrap {padding: 100px; text-align: center; } #mask {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,.4); display: none; -moz-user-select: none; -webkit-user-select: none;} #dialog {position: absolute; width: 250px; height: 200px; top: 0; left: 0; border-radius: 10px; z-index: 2; background: #fff; display: none; -moz-user-select: none; -webkit-user-select: none;} .dialog_head {text-align: center; line-height: 50px; background-color: #ddd; cursor: move; } .dialog-body {height: 100px; } .dialog-foot {height: 50px; text-align: center; line-height: 50px; background-color: #ddd; } </style></head><body><div class="dialog_btn_wrap"> <a class="btn btn-lg btn-primary" id="dialog_btn">弹窗</a></div><!--蒙层--><div id="mask"></div><!--弹窗--><div id="dialog"> <div class="dialog_head" id="move_part">可拖拽区域</div> <div class="dialog-body"></div> <div class="dialog-foot"> <a class="btn btn-default" id="dialog_close">敞开</a> </div></div><script> //g()函数用于获取dom对象 function g(id) { return document.getElementById(id); } //点击弹出弹窗 g('dialog_btn').onclick = function () { g('mask').style.display = 'block'; g('dialog').style.display = 'block'; autoCenter(g('dialog')); } //点击敞开弹窗 g('dialog_close').onclick = function () { g('mask').style.display = 'none'; g('dialog').style.display = 'none'; } //弹窗主动居中 function autoCenter(el) { //获取窗口宽高 var windowW = document.documentElement.clientWidth; var windowH = document.documentElement.clientHeight; //获取弹窗宽高 var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = (windowW-elW)/2 + 'px'; el.style.top = (windowH-elH)/2 + 'px'; } //禁止选中弹窗内容 //document.attachEvent IE浏览器监听事件，拖拽时禁止选中，firefox、chrome通过css -moz-user-select: none; -webkit-user-select: none;设置 if(document.attachEvent) { g('dialog').attachEvent('onselectstart', function () { return false; }) } //扭转窗口大小，弹窗主动居中 window.onresize = function () { autoCenter(g('dialog')); } //拖拽实现原理 //1.鼠标点击时，设置弹窗可拖动，记录鼠标初试地位 //2.鼠标拖动时，依据鼠标新地位更新弹窗地位 //3.鼠标来到时，设置弹窗不可拖动 //4.限度弹窗拖拽范畴 var mx = 0; //鼠标x,y轴坐标(绝对于left top) var my = 0; var dx = 0; //弹窗x,y轴坐标 var dy = 0; var isDraging = false; // 弹窗不可拖动 //鼠标点击 g('move_part').addEventListener('mousedown', function (e) { var e = e || window.event; //兼容写法，window.event为IE浏览器独有对象 mx = e.pageX; //点击时鼠标X坐标 my = e.pageY; //点击时鼠标Y坐标 dx = g('dialog').offsetLeft; //弹窗距页面左侧间隔 dy = g('dialog').offsetTop; //弹窗距页面顶部间隔 isDraging = true; //标记弹窗可拖动 }) //鼠标拖动 //当鼠标在以后对象上挪动时就产生了onmousemove事件 document.onmousemove = function (e) { var e = e || window.event; var x = e.pageX; //挪动时鼠标X坐标 var y = e.pageY; //挪动时鼠标X坐标 if(isDraging) { var moveX = x - mx + dx; //位移值+弹窗left值=挪动后弹窗left值 var moveY = y - my + dy; //挪动后弹窗top值 //限度弹窗拖拽范畴 //页面宽高 var pageW = document.documentElement.clientWidth; var pageH = document.documentElement.clientHeight; //弹窗宽高 var dialogW = g('dialog').offsetWidth; var dialogH = g('dialog').offsetHeight; var maxX = pageW - dialogW; //x轴可拖动最大值 var maxY = pageH - dialogH; //x轴可拖动最大值 //Math.min() Math.max()妙用 moveX = Math.min(Math.max(0, moveX), maxX); //设定left范畴, 0-maxX moveY = Math.min(Math.max(0, moveY), maxY); //设定top范畴, 0-maxY //从新设置弹窗地位 g('dialog').style.left = moveX + 'px'; g('dialog').style.top = moveY + 'px'; } } //鼠标来到 g('move_part').addEventListener('mouseup', function () { isDraging = false; })</script></body></html>