วันนี้เราจะแก้ปัญหาบางอย่างในต้นแบบของการลากครั้งสุดท้าย มาดูกันว่าปัญหาคืออะไร
แนบรหัส JavaScript จากปัญหาก่อนหน้านี้เพื่ออำนวยความสะดวกให้ทุกคนดูปัญหา
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || เหตุการณ์; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; - odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; - - - </script>1. ถ้าเมาส์ของฉันเคลื่อนที่เร็วขึ้นตอนนี้คุณจะพบว่าเมาส์ออกมาจาก Div นี้และ DIV จะไม่ติดตามเมาส์ในเวลานี้
แล้วทำไมปัญหานี้จึงเกิดขึ้น?
เหตุผลนั้นง่ายมาก เราเพิ่มเหตุการณ์ Mousemove ลงใน Div ดังนั้นเมื่อเมาส์เบี่ยงเบนจาก Div Mousemove จะไม่ถูกกระตุ้นอีกต่อไปในเวลานี้
วิธีแก้ปัญหา: เหตุการณ์โหลดในเอกสารเนื่องจากเมาส์ของคุณยังอยู่ในหน้าไม่ว่าจะเกิดอะไรขึ้น Mousemove จะถูกกระตุ้นไม่ว่าจะเกิดอะไรขึ้นดังนั้นมันจะเร็ว
จากนั้นเราแก้ไขรหัสตามนั้น
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; // บนเอกสารโหลดเหตุการณ์ onmousemove = function (ev) {var oevent = ev || เหตุการณ์; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; - odiv.onmouseup = function () {document.onmousemove = null; odiv.onmouseup = null; - - - </script>จากนั้นปัญหานี้สามารถแก้ไขได้
2. มาดูกันว่ามีปัญหาอะไรบ้าง แม้ว่าปัญหาการลากได้รับการแก้ไขอย่างรวดเร็ว แต่เมื่อฉันย้ายเมาส์ไปยังตำแหน่งนี้
ตอนนี้คุณสามารถเห็นได้อย่างชัดเจนว่าเมาส์ไม่ได้อยู่ใน Div หากคุณยกเมาส์ในเวลานี้คุณจะเห็นว่ามันจะเคลื่อนไหวหลังจากที่คุณกลับมา นี่เป็นข้อบกพร่องอื่น!
ในความเป็นจริงคำถามนี้เหมือนกับคำถามข้างต้น ดังนั้นจึงง่ายมากที่จะแก้
document.onmouseup = function () {document.onmousemove = null; document.onmouseup = null; -ด้วยวิธีนี้หากคุณย้ายไปยังตำแหน่งที่คุณตอนนี้จะไม่มีข้อผิดพลาดก่อนหน้านี้และจะไม่มีปัญหากับการเคลื่อนไหวอย่างรวดเร็ว ทุกอย่างเป็นเรื่องปกติ
3. มาดูปัญหาความเข้ากันได้ของเบราว์เซอร์
ในความเป็นจริงมีปัญหาดังกล่าวในเบราว์เซอร์ Firefox รุ่นล่างรุ่นล่าง
- มันเกิดขึ้นได้อย่างไร? เมื่อคุณลากครั้งแรกมันถูกต้อง เมื่อคุณลากมันครั้งเดียวกดค้างไว้และย้ายมันคุณจะพบว่าจะมีเงาอยู่ด้านหลัง เกิดอะไรขึ้นกับสิ่งนี้?
ในความเป็นจริง Firefox ที่เรากำลังลากอยู่ตอนนี้คือ Buggy แล้วถ้าเราเพิ่มเนื้อหาบางส่วนลงใน div
คุณจะพบว่าตอนนี้ไม่มีปัญหา
ดังนั้นข้อผิดพลาด Firefox จะปรากฏใน div ที่ว่างเปล่าเท่านั้น
สารละลาย:
อันที่จริงมันง่ายมาก เราเพียงแค่ต้องบล็อกเหตุการณ์เริ่มต้นของเบราว์เซอร์และส่งคืน FALSE ใน Onmousedown ทำไมต้องเพิ่มลงใน Onmousedown?
คุณสามารถคิดว่าการลากเริ่มต้นเหตุการณ์ใด มันเริ่มต้นด้วย Onmousedown เมื่อกดเมาส์การลากจะเริ่มขึ้น ดังนั้นคุณต้องโหลด OnMousedown
ในความเป็นจริงมันเพิ่งเพิ่มการส่งคืนประโยคเท็จ; บล็อกบั๊ก Firefox
ด้วยวิธีนี้ไม่ว่าคุณจะล่าช้าอย่างไรจะไม่มีปัญหา
รหัสที่แนบมา:
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; // บนเอกสารโหลดเหตุการณ์ onmousemove = function (ev) {var oevent = ev || เหตุการณ์; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; - document.onmouseup = function () {document.onmousemove = null; document.onmouseup = null; - กลับเท็จ; - - </script>ตอนนี้โปรแกรมเสร็จสมบูรณ์ แต่ยังมีปัญหาบางอย่างเกี่ยวกับประสบการณ์ผู้ใช้
ตัวอย่างเช่นหากผู้ใช้อาจลาก Div นี้ออกจากเบราว์เซอร์เขาจะแก้ปัญหาได้อย่างไร
จากนั้นเรากำลังเพิ่มการตัดสิน มันง่ายมากถ้าคุณออกไปจากซ้าย
นั่นเท่ากับ 0 และเขาไม่สามารถออกไปจากซ้ายได้ จากนั้นก็เป็นจริงข้างต้น
แล้วเราจะป้องกันไม่ให้ตัวเองออกไปจากด้านขวาได้อย่างไร? - เพียงแค่วาดรูปและทำให้ชัดเจน ในความเป็นจริงเราสามารถคำนวณได้โดยการลบความกว้างของภาพของหน้าจาก div
จากนั้นนี่คือค่าสูงสุดที่เรียกว่า เพียงตัดสินว่าระยะทางที่เคลื่อนที่เกินกว่าค่าสูงสุดนี้จะเท่ากับค่าสูงสุดนี้หรือไม่ จากนั้นต่อไปนี้จะเหมือนกัน
แนบรหัสเต็ม:
<script type = "text/javascript"> // drag และวาง div ที่ว่างเปล่า Firefox รุ่นต่ำมี bug window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || เหตุการณ์; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || เหตุการณ์; // เก็บตำแหน่งปัจจุบันของ div var odivleft = oeVent.Clientx - disx; var odivtop = oEvent.Clienty - disy; // ลากออกจากด้านซ้ายถ้า (odivleft <0) {odivleft = 0; } อื่นถ้า (odivleft> document.documentelement.clientWidth - odiv.offsetWidth) {odivleft = document.documentelement.clientWidth - odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } อื่นถ้า (odivtop> document.documentelement.clientheight - odiv.offsetheight) {odivtop = document.documentelement.clientheight - odiv.offsetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; - document.onmouseup = function () {document.onmousemove = null; document.onmouseup = null; - กลับเท็จ; // บล็อกเหตุการณ์เริ่มต้นและแก้ไขข้อผิดพลาด Firefox}; - </script>จากนั้นการลากจะเสร็จสมบูรณ์มากขึ้นในขณะนี้ o (∩_∩) o