Este artículo comparte la demostración del código de arrastre de ventana emergente nativa para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Pop Window arrastre </title> <style> *{margen: 0; relleno: 0;} .Box {Position: Absolute; ancho: 400px; altura: 300px; top: 100px; izquierda: 100px: 1px: 1px #001c67; fondo: #} .move {posición: absoluto; ancho: 100px; altura: 100px; arriba: 100px; izquierda: 150px; borde: 1px sólido #000;} .move: hover {cursor: mover 30px; top: 0px; derecha: 0px; fondo: rojo; text-align: center; line-height: 30px;} </style> <script> window.onload = function () {var omove = document.getElementById ('Move'); // drag omove.onmousedown = fndown; // cerrar 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'), // Cuando el cursor presiona la distancia entre el cursor y el panel es disx = event.clientx-dodrag.offsetleft, disy = event.clienty-odrag.offsettop; // Mover document.onmouseMove = function (event) {event = event || Window.event; var l = event.clientx-disx, t = event.clienty-disy, // máximo izquierda, valor superior izquierdMax = (document.documentelement.clientwidth || document.body.clientwidth) -odrag.offsetwidth, topmax = (document.Documentelement.clientHeight || document.body.clientheight) -ododrag. 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'; } // libera el mouse document.onmouseUp = function () {document.onmouseMove = null; document.onmouseUp = null; }} </script> </head> <body> <div id = "box"> <div id = "mover"> área de arrastre </div> <div id = "Close"> x </div> </div> </body> </html>Puntos principales a tener en cuenta :
1.Evento, es decir, problemas de compatibilidad
2. Al hacer clic en el mouse, primero debe determinar la distancia entre el mouse y el panel.
3. Debes juzgar la distancia entre la ventana emergente y toda el área del navegador, y no dejar que la ventana emergente salga del área fuera del navegador.
4. Libera el mouse y desata el evento, de lo contrario habrá errores.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.