This article shares the native pop-up window drag code demo for your reference. The specific content is as follows
Reproduction image:
Implementation code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Pop Window Drag</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:1px solid #001c67;background: #} .move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;border:1px solid #000;} .move:hover{cursor: move;} .close{position: absolute;width: 30px;height: 30px;top:0px;right:0px;background:red;text-align: center;line-height: 30px;} </style> <script> window.onload=function(){ var oMove=document.getElementById('move'); // Drag oMove.onmousedown=fnDown; // Close var oClose=document.getElementById('close'); oClose.onclick=function(){ document.getElementById('box').style.display='none'; } } function fnDown(event){ event = event || window.event; var oDrag=document.getElementById('box'), // When the cursor presses the distance between the cursor and the panel is disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; // Move document.onmousemove=function(event){ event = event || window.event; var l=event.clientX-disX, t=event.clientY-disY, // Maximum left,top value leftMax=(document.documentElement.clientWidth || document.body.clientWidth)-oDrag.offsetWidth, topMax=(document.documentElement.clientHeight || document.body.clientHeight)-oDrag.offsetHeight; if(l<0) l=0; if(l>leftMax) l=leftMax; if(t<0) t=0; if(t>topMax) t=topMax; oDrag.style.left=l+'px'; oDrag.style.top=t+'px'; } // Release the mouse document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script></head><body> <div id="box"> <div id="move">Drag area</div> <div id="close">X</div> </div></body></html>Main points to note :
1.event, IE compatibility issues
2. When clicking the mouse, you must first determine the distance between the mouse and the panel.
3. You must judge the distance between the pop-up window and the entire browser area, and do not let the pop-up window run out of the area outside the browser.
4. Release the mouse and unbind the event, otherwise there will be bugs.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.