html
<div id="showd" style="display: block;"> <div class="cy_op"></div> <div id="replace" class="tuo"> <div class="box hbox"> <span>替换数据库字符串</span> <a href="javascript:">X</a> </div> <div class="box bbox"> <table> <tbody><tr> <td>原来的字符串</td> <td><input type="" name="oldstr" value=""></td> </tr> <tr> <td>替换为</td> <td><input type="" name="newstr" value=""></td> </tr> </tbody></table> </div> <div class="box fbox"> <button class="but-green-90 confirm">确定</button> <button class="but-yellow-90 cancel">取消</button> </div> </div> </div>
css
#showd{ display:none; } #replace{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:360px; background-color:#fff; border:1px solid #ddd; border-radius: 4px; z-index: 999 } #showd .cy_op{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #333333; opacity: 0.4; z-index: 999; } #replace .box{ background-color:#fff; } #replace .hbox>a{ float: right; padding-right: 15px; } #replace .hbox{ background-color:#00aea4; height:35px; text-align: left; line-height: 35px; padding-left:20px; font-size:16px; color:#fff; border-bottom:1px solid #e3e3e3; cursor:move } #replace .bbox{ margin:13px auto; text-align:center; } #replace .bbox table{ height:65px; } #replace .fbox{ text-align:center; padding:5px; border-top:1px solid #00aea4; } #replace .fbox button+button{ margin-left:10px; }
js
//字符串替换窗口的拖动事件 var oDiv = document.getElementById('replace'); oDiv.getElementsByClassName("hbox")[0].onmousedown = function(ev) { var ev = ev || event; var distanceX = ev.clientX - oDiv.offsetLeft;//鼠标相对于目标元素的x位置 var distanceY = ev.clientY - oDiv.offsetTop; document.onmousemove=function(ev){ var dialogRight,dialogBottom,maxTop,maxLeft; var ev = ev || event; var l=ev.clientX - distanceX; var t= ev.clientY - distanceY; if(l- oDiv.offsetWidth/2<0){ l=0+ oDiv.offsetWidth/2//因为transform偏移了50% } console.log(l- oDiv.offsetWidth/2); if(t- oDiv.offsetHeight/2<0){ t=0+ oDiv.offsetHeight/2 } oDiv.style.left = l+ 'px'; oDiv.style.top = t+ 'px'; //判断是否超出窗体 //计算出弹出层距离右边的位置(窗口的宽度-目标元素的left宽度-目标元素的宽度) dialogRight=window.innerWidth-l-oDiv.offsetWidth; dialogBottom=window.innerHeight-t-oDiv.offsetHeight; //console.log("dialogRight为："+dialogRight); //console.log("dialogBottom为："+dialogBottom); //计算出最大的left和最大的top： maxTop= window.innerHeight-oDiv.offsetHeight; maxLeft=window.innerWidth-oDiv.offsetWidth; //console.log("maxTop为："+maxTop); //console.log("maxLeft为："+maxLeft); if(dialogRight+oDiv.offsetWidth/2<0){ oDiv.style.left = maxLeft +oDiv.offsetWidth/2+ 'px';//因为样式有偏移50% } if(dialogBottom+ oDiv.offsetHeight/2<0){ oDiv.style.top = maxTop + oDiv.offsetHeight/2+'px'; } } document.onmouseup=function(ev){ document.onmousemove = document.onmouseup = null;//清除 } }
效果
test代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> #showd{ display:none; } #replace{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:360px; background-color:#fff; border:1px solid #ddd; border-radius: 4px; z-index: 999 } #showd .cy_op{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #333333; opacity: 0.4; z-index: 999; } #replace .box{ background-color:#fff; } #replace .hbox>a{ float: right; padding-right: 15px; } #replace .hbox{ background-color:#00aea4; height:35px; text-align: left; line-height: 35px; padding-left:20px; font-size:16px; color:#fff; border-bottom:1px solid #e3e3e3; cursor:move } #replace .bbox{ margin:13px auto; text-align:center; } #replace .bbox table{ height:65px; } #replace .fbox{ text-align:center; padding:5px; border-top:1px solid #00aea4; } #replace .fbox button+button{ margin-left:10px; } </style> </head> <body> <div id="showd" style="display: block;"> <div class="cy_op"></div> <div id="replace" class="tuo"> <div class="box hbox"> <span>替换数据库字符串</span> <a href="javascript:">X</a> </div> <div class="box bbox"> <table> <tbody><tr> <td>原来的字符串</td> <td><input type="" name="oldstr" value=""></td> </tr> <tr> <td>替换为</td> <td><input type="" name="newstr" value=""></td> </tr> </tbody></table> </div> <div class="box fbox"> <button class="but-green-90 confirm">确定</button> <button class="but-yellow-90 cancel">取消</button> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ //字符串替换窗口的拖动事件 var oDiv = document.getElementById('replace'); oDiv.getElementsByClassName("hbox")[0].onmousedown = function(ev) { var ev = ev || event; var distanceX = ev.clientX - oDiv.offsetLeft;//鼠标相对于目标元素的x位置 var distanceY = ev.clientY - oDiv.offsetTop; document.onmousemove=function(ev){ var dialogRight,dialogBottom,maxTop,maxLeft; var ev = ev || event; var l=ev.clientX - distanceX; var t= ev.clientY - distanceY; if(l- oDiv.offsetWidth/2<0){ l=0+ oDiv.offsetWidth/2//因为transform偏移了50% } console.log(l- oDiv.offsetWidth/2); if(t- oDiv.offsetHeight/2<0){ t=0+ oDiv.offsetHeight/2 } oDiv.style.left = l+ 'px'; oDiv.style.top = t+ 'px'; //判断是否超出窗体 //计算出弹出层距离右边的位置(窗口的宽度-目标元素的left宽度-目标元素的宽度) dialogRight=window.innerWidth-l-oDiv.offsetWidth; dialogBottom=window.innerHeight-t-oDiv.offsetHeight; //console.log("dialogRight为："+dialogRight); //console.log("dialogBottom为："+dialogBottom); //计算出最大的left和最大的top： maxTop= window.innerHeight-oDiv.offsetHeight; maxLeft=window.innerWidth-oDiv.offsetWidth; //console.log("maxTop为："+maxTop); //console.log("maxLeft为："+maxLeft); if(dialogRight+oDiv.offsetWidth/2<0){ oDiv.style.left = maxLeft +oDiv.offsetWidth/2+ 'px';//因为样式有偏移50% } if(dialogBottom+ oDiv.offsetHeight/2<0){ oDiv.style.top = maxTop + oDiv.offsetHeight/2+'px'; } } document.onmouseup=function(ev){ document.onmousemove = document.onmouseup = null;//清除 } } } </script> </body> </html> View Code
转载于:https://www.cnblogs.com/pengfei25/p/10239546.html
相关资源：在窗口中限制鼠标的移动范围，Delphi源码..rar