この記事では、参照用のネイティブポップアップウィンドウドラッグコードデモを共有しています。特定のコンテンツは次のとおりです
複製画像：
実装コード：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>ポップウィンドウドラッグ</title> <style> *{magrin：0; padding：0;} .box {position：absolute; width：400px; height：300px; tof：100px; ＃} .move {position：absolute; width：100px; height：100px; top：100px; left：150px; border：1px solid＃000;} .move：hover {cursor：move;} .close {position：absolute; width：width：30px; height：30px; right：0px; 30px;} </style> <script> window.onload = function（）{var omove = document.getElementById（ 'move'）; // omove.onmousedown = fndownをドラッグします。 // 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'）、//カーソルがカーソルとパネルの間の距離を押すとdisx = event.clientx-odrag.offsetleft、disy = event.clienty-odrag.offsettop; // document.onmousemove = function（event）{event = event ||を移動しますwindow.event; var l = event.clientx-disx、t = event.clienty-disy、//最大左、最大値leftmax =（document.documentelement.clientwidth || document.body.clientwidth）-odrag.offsetwidth、topmax =（document.documentelement.clientheigh 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'; } // Mouse Document.onmouseup = function（）{document.onmousemove = null; document.onmouseup = null; }} </script> </head> <body> <div id = "box"> <div id = "move">ドラッグエリア</div> <div id = "close"> x </div> </div> </body> </html>注意すべき主なポイント：
1.vent、すなわち互換性の問題
2。マウスをクリックするときは、最初にマウスとパネルの間の距離を決定する必要があります。
3.ポップアップウィンドウとブラウザ領域全体の距離を判断し、ポップアップウィンドウをブラウザの外側の領域から使い果たしないでください。
4.マウスをリリースしてイベントを解除します。それ以外の場合はバグがあります。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。