Artikel ini membagikan demo kode seret jendela pop-up asli untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Gambar reproduksi:
Kode Implementasi:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Pop Window Drag </ title> <tyle> *{margin: 0; padding: 0;} .box {Posisi: absolute; lebar: 400px; tinggi: 300px; TOP: LARIJUK: #} .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'); // seret omove.onmousedown = fndown; // tutup var oclose = document.geteLementById ('tutup'); oclose.onClick = function () {document.geteLementById ('box'). style.display = 'none'; }} function fndown (event) {event = event || window.event; var odrag = document.getElementById ('box'), // Ketika kursor menekan jarak antara kursor dan panel disx = event.clientx-odrag.offsetleft, disy = event.clienty-drag.offsettop; // pindahkan document.onmouseMove = function (event) {event = event || window.event; var l = event.clientx-disx, t = event.clienty-disy, // maksimum kiri, nilai tertinggi leftmax = (document.documentelement.clientwidth || document.body.clientwidth) -odrag. 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'; } // lepaskan mouse document.onmouseUp = function () {document.onmouseMove = null; document.onmouseup = null; }} </script> </head> <body> <v id = "box"> <div id = "move"> Area seret </div> <v id = "tutup"> x </div> </div> </body> </html>Poin utama yang perlu diperhatikan :
1. Bagi, yaitu masalah kompatibilitas
2. Saat mengklik mouse, Anda harus terlebih dahulu menentukan jarak antara mouse dan panel.
3. Anda harus menilai jarak antara jendela pop-up dan seluruh area browser, dan jangan biarkan jendela pop-up keluar dari area di luar browser.
4. Lepaskan mouse dan lepaskan acara, jika tidak akan ada bug.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.