Dieser Artikel teilt das native Popup-Fenster-Drag-Code-Demo für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Pop-Fenster-Drag </title> <style> *{margin: 0; padding: 0;} .box {Position: Absolute; Breite: 400PX; #001c67; Hintergrund: #} .Move {Position: absolut; width: 100px; Höhe: 100px; ober: 100px; links: 150px; Rand: 1px solide #000;} .move: hover {curSor: Bewegung;} .close {Position: absolut; width: 30px; Höhe: 30px; oben: 0px; rechts: 0px; Hintergrund: rot; text-align: center; leitungshöhe: 30px;} </style> <script> Fenster.onload = function () {var omove = document.getElementById ('move'); // omove.onmousedown = fndown; // Close var oclose = document.getElementById ('close'); oclose.onclick = function () {document.getElementById ('box'). style.display = 'none'; }} Funktion fndown (Ereignis) {Ereignis = Ereignis || Fenster.Event; var odrag = document.getElementById ('box'), // Wenn der Cursor den Abstand zwischen dem Cursor und dem Panel drückt, ist disx = event.clientx-oodrag.offsetleft, disy = event.clienty-oodrag.offsettop; // DOCUMME MOVEL.onmousemove = Funktion (Ereignis) {Ereignis = Ereignis || Fenster.Event; var l = event.clientx-disx, t = event.clienty-disy, // Maximum links, Top-Wert Leftmax = (document.documentElement if (l <0) l = 0; if (l> linkmax) l = linkmax; if (t <0) t = 0; if (t> topmax) t = topmax; odrag.Style.left = l+'px'; odrag.style.top = t+'px'; } // das Maus document.onmousUp = 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>Hauptpunkte zu beachten :
1. Event, dh Kompatibilitätsprobleme
2. Wenn Sie auf die Maus klicken, müssen Sie zunächst den Abstand zwischen der Maus und dem Panel bestimmen.
3.. Sie müssen den Abstand zwischen dem Popup-Fenster und dem gesamten Browserbereich beurteilen und das Popup-Fenster nicht außerhalb des Browsers verlaufen.
V.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.