บทความนี้แชร์การสาธิตการลากรหัสหน้าต่างป๊อปอัพดั้งเดิมสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
รหัสการใช้งาน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> pop window drag </title> <style> *{margin: 0; padding: 0;} .box {ตำแหน่ง: Absolute; ความกว้าง: 400px; #001c67; พื้นหลัง: #} .move {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100px; ความสูง: 100px; ด้านบน: 100px; ซ้าย: 150px; เส้นขอบ: 1px ของแข็ง #000;} .move: hover {เคอร์เซอร์: ย้าย;}. close {ตำแหน่ง: Absolute; 30px; ด้านบน: 0px; ขวา: 0px; พื้นหลัง: สีแดง; text-allign: center; line-height: 30px;} </style> <script> window.onload = function () {var omove = document.getElementById ('ย้าย'); // ลาก omove.onmousedown = fndown; // ปิด var oclose = document.getElementById ('ปิด'); oclose.onclick = function () {document.getElementById ('box'). style.display = 'none'; }} ฟังก์ชั่น fndown (เหตุการณ์) {event = event || window.event; var odrag = document.getElementById ('box'), // เมื่อเคอร์เซอร์กดระยะห่างระหว่างเคอร์เซอร์และแผงเป็น disx = event.clientx-odrag.offsetleft, disy = event.clienty-odrag.offsettop; // ย้าย document.onmousemove = function (เหตุการณ์) {event = event || window.event; var l = event.clientx-disx, t = event.clienty-disy, // สูงสุดซ้าย, ค่าสูงสุดด้านซ้าย = (document.documentelement.clientWidth || document.body.clientwidth) -odrag.offsetWidth, topmax = (document.documentelement.clientheight ถ้า (l <0) l = 0; if (l> leftmax) l = leftmax; ถ้า (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 = "ย้าย"> พื้นที่ลาก </div> <div id = "close"> x </div> </div> </body> </html>ประเด็นหลักที่ควรทราบ :
1. ปัญหาคือปัญหาความเข้ากันได้
2. เมื่อคลิกเมาส์คุณต้องกำหนดระยะห่างระหว่างเมาส์และแผงควบคุมก่อน
3. คุณต้องตัดสินระยะห่างระหว่างหน้าต่างป๊อปอัพและพื้นที่เบราว์เซอร์ทั้งหมดและอย่าปล่อยให้หน้าต่างป๊อปอัปหมดจากพื้นที่ด้านนอกเบราว์เซอร์
4. ปล่อยเมาส์และปลดเหตุการณ์มิฉะนั้นจะมีข้อบกพร่อง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น