หลักการของการลาก: อันที่จริงระยะห่างระหว่างเมาส์และมุมบนซ้ายยังคงไม่เปลี่ยนแปลง มาดูภาพด้านล่าง จุดสีแดงนี้คือเมาส์
การลากลากจริงหมายถึงการคำนวณตำแหน่งของวัตถุผ่านตำแหน่งของเมาส์ มันเป็นเรื่องง่ายและจงใจ แล้วคุณจะหาระยะทางนี้ได้อย่างไร? -
ความแตกต่างระหว่างตำแหน่งเมาส์และตำแหน่งวัตถุคือระยะทางนั้นใช่ไหม? จากนั้นเส้นทแยงมุมนี้ประกอบด้วยเส้นแนวนอนและแนวตั้ง
มาดูกันว่าโปรแกรมเสร็จสิ้นอย่างไร
<div id = "div1"> </div>
ในความเป็นจริงสิ่งที่เขาเปลี่ยนไปคือด้านซ้ายของ Div จากนั้นเขาก็เริ่มเคลื่อนไหว ในกรณีนั้นจะต้องมีตำแหน่งแน่นอนใช่ไหม?
<style type = "text/css"> #div1 {width: 200px; ความสูง: 200px; ความเป็นมา: สีแดง; ตำแหน่ง: สัมบูรณ์; } </style>นี่คือไม่กี่ขั้นตอน: 1. กดเมาส์ 2. ยกเมาส์ 3 ย้ายเมาส์
<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; // ตำแหน่งแนวนอนคือตำแหน่งเมาส์ - ตำแหน่งของ div disy = oevent.clienty - odiv.offsettop; - odiv.onmousemove = function (ev) {var oevent = ev || เหตุการณ์; odiv.style.left = oevent.clientx - disx+'px'; // ตำแหน่งเมาส์ปัจจุบัน -disx odiv.style.top = oevent.clienty - disy+'px'; - - </script>คุยกับภาพ:
var odivleft = oeVent.Clientx - disx; แผนภาพนั้นชัดเจนมาก
Mouseup อย่ามาดูว่าเอฟเฟกต์คืออะไร -
คุณจะพบปรากฏการณ์ที่น่าสนใจมาก หากฉันไม่กดเมาส์ฉันจะติดตามฉัน ทำไมถึงเป็นเช่นนี้? - -
มาดู Mousemove: ไม่มีใครใน JavaScript กำหนดว่าคุณต้องกดเมาส์ก่อนที่จะเริ่มใช่ไหม ไม่ว่าคุณจะกดเมาส์หรือไม่ก็ตาม mousemove นี้จะเกิดขึ้นตลอดเวลาดังนั้นปัญหามาจากที่นี่ ก่อนที่เมาส์จะถูกกดไม่ควรตอบสนองเมื่อเมาส์เคลื่อนที่ไป คุณต้องกดเพื่อตอบสนอง
ดังนั้น mousemove นี้ไม่ควรเพิ่มทันทีที่เปิดตัว แต่ควรรอจนกว่าเมาส์จะถูกกดแล้วเพิ่ม mousemove เพื่อดูรหัสที่แก้ไข
โดยวิธีการที่ Mouseup ถูกเพิ่มเข้ามาและบทบาทของเขาก็สะท้อนให้เห็นในเวลานี้ ฟังก์ชั่นคือ odiv.onmousemove = null; ลบเหตุการณ์การย้ายออก
มิฉะนั้นเมื่อเมาส์ของคุณถูกยกขึ้นวัตถุจะยังคงติดตามคุณ odiv.onmouseup = null; หากไม่มีขยะเหลืออยู่มันจะไร้ประโยชน์ที่จะยกเมาส์
ลองดูที่รหัสที่แก้ไข:
<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; // ตำแหน่งแนวนอนคือตำแหน่งเมาส์ - ตำแหน่งของ div disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || เหตุการณ์; odiv.style.left = oevent.clientx - disx+'px'; // ตำแหน่งเมาส์ปัจจุบัน -disx odiv.style.top = oevent.clienty - disy+'px'; - odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; // ไม่มีขยะเหลืออยู่มันจะไร้ประโยชน์ที่จะยกเมาส์}; - - </script>ตอนนี้เราทำการลากและวางง่าย ๆ แน่นอนว่ายังมีปัญหาเล็ก ๆ น้อย ๆ ที่ต้องแก้ไข
แต่ไม่ว่าจะเกิดอะไรขึ้นเราก็มีต้นแบบการลากอยู่แล้ว เราจะแก้ไขข้อบกพร่องบางอย่างทีละคนในฉบับต่อไป