Este artigo compartilha a demonstração de código de arrasto de janela pop-up nativa para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código de implementação:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Pop Window Drag </title> <yoy> *{margin: 0; Padding: 0;} .xox {Position: Absolute; Width: 400px; altura: 300px;};}. #} .move {posição: absoluto; largura: 100px; altura: 100px; topo: 100px; esquerda: 150px; borda: 1px sólido #000;} .move: hover {cursor: mover;} .close {position: absoluto; largura: 30px; 30px;} </style> <cript> window.onload = function () {var omove = document.getElementById ('move'); // drag omove.onmousedown = fndown; // fechar var oclose = document.getElementById ('Close'); oclose.OnClick = function () {document.getElementById ('box'). style.display = 'nenhum'; }} função fndown (event) {event = event || Window.Event; var odrag = document.getElementById ('caixa'), // Quando o cursor pressiona a distância entre o cursor e o painel é disx = event.clientx-odrag.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 esquerdo, valor superior esquerdmax = (document.documentElement.clientWidth || document.body.clientWidth) -OdRag.OffSetWidth, topMax = (document.documentElement.clientHeth || 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'; } // Libere o mouse document.onMouseUp = function () {document.onMousemove = null; document.onmouseup = null; }} </script> </ad Head> <body> <div id = "box"> <div id = "mover"> arrastar área </div> <div id = "close"> x </div> </div> </body> </html>Pontos principais a serem observados :
1.Event, ou seja, problemas de compatibilidade
2. Ao clicar no mouse, você deve primeiro determinar a distância entre o mouse e o painel.
3. Você deve julgar a distância entre a janela pop-up e toda a área do navegador e não deixe a janela pop-up sair da área fora do navegador.
4. Libere o mouse e desbaste o evento, caso contrário, haverá bugs.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.