วันนี้ฉันมีความสุขเล็กน้อย บล็อก CSDN มีมากกว่า 10,000 ครั้ง ฉันไม่เคยมีมุมมองจำนวนมากเช่นนี้มาก่อน ฉันต้องบอกว่าฉันยังคงเสแสร้งบ่อยเกินไป แต่ฉันก็ยังไม่สามารถช่วยได้ แต่มีความสุขเมื่อเห็นกำลังใจเหล่านี้ อย่างน้อยสิ่งนี้ทำให้ฉันรู้สึกเหมือนเป็นคนในอุตสาหกรรม ฉันไม่ได้อยู่คนเดียว
หากไม่มีความกังวลใจเพิ่มเติมให้บันทึกการบันทึกในวันนี้บันทึกเครื่องหมายการลากซ้ำและวิเคราะห์จากกระบวนการ:
1. ในการเล่นซ้ำเครื่องหมายลากคุณต้องบันทึกก่อน;
2. ในการบันทึกการลากร่องรอยการลากจะต้องดำเนินการ;
ปัญหานี้เกิดขึ้นเมื่อไม่กี่วันที่ผ่านมาและมันก็มีข้อบกพร่องเล็กน้อยในเวลานั้น แต่วิธีการใช้งานทั่วไปนั้นชัดเจนดังนั้นวันนี้ฉันรู้ว่าปัญหานี้เร็วขึ้นมาก ฉันมีความสุขจริงๆ หลังจากตระหนักอีกครั้งในวันนี้ฉันเข้าใจมันลึกลงไปเล็กน้อยดังนั้นฉันจะบันทึกวันนี้
สำหรับการบันทึกร่องรอยการลากการวิเคราะห์นี้จะสั้นหลังจากทั้งหมดฉันได้ทำครั้งเดียว:
1. กำหนดตำแหน่งปัจจุบันและสถานะของ DIV เพื่อให้แน่ใจว่าสามารถใช้สัมบูรณ์ในการลากได้
2. ฟังเหตุการณ์การลากเมาส์ (เหตุการณ์เมาส์หลายครั้งสรุปเมื่อวานนี้);
3. ทำการตอบสนองที่สอดคล้องกันตามเหตุการณ์เมาส์ที่เกี่ยวข้องและบันทึกจุดที่ DIV มีอยู่ในการลากและวางบน onmousemove;
4. ฟังเหตุการณ์เด้งเมาส์เพื่อสิ้นสุดเหตุการณ์การลากและบันทึกจุด
อย่างไรก็ตามให้ใช้รหัสต่อไปนี้ก่อน (รหัสทั้งหมดจะอยู่ที่นี่ในเวลาเดียวกันและวิเคราะห์ทีละหนึ่งในภายหลัง):
ภาษา HTML:
<div id = "showzone"> </div> // สิ่งนี้ยังคงคุ้นเคย <a href = "#" style = "ตำแหน่ง: สัมบูรณ์; มาร์จิ้นด้านบน: 100px; สี: สีเหลือง; พื้นหลัง-สี: สีแดง;"> reback </a> //
JavaScript Part:
window.onload = function () {var obj = document.getElementById ("showzone"); var disx = disy = 0; var dragif = false; ตำแหน่ง var = [{x: obj.offsetleft, y: obj.offsettop}]; // นี่คือกุญแจสำคัญในการใช้การบันทึกและการเล่นและอื่น ๆ ทั้งหมดได้รับองค์ประกอบพื้นฐาน var oa = document.getElementsByTagname ("A") [0]; obj.onmousedown = function (เหตุการณ์) {var event = event || window.event; disx = event.clientx-obj.offsetleft; // ระยะทางของเมาส์ไปยัง Div Border disy = event.clienty-obj.offSettop; dragif = true; // position flag.push ({x: obj.offsetleft, y: obj.offsettop}); // บันทึกเริ่มต้นจากเวลานี้ส่งคืนเท็จ; - document.onmousemove = function (เหตุการณ์) {ถ้า (! dragif) return; // การตัดสินนี้มีความสำคัญอย่างยิ่งเฉพาะการเคลื่อนไหวที่กดเท่านั้นที่สามารถเป็นเหตุการณ์ var ที่ถูกต้อง = เหตุการณ์ || window.event; var nowx = event.clientx-disx; // ตามระยะทางของเมาส์ที่บันทึกไว้ข้างต้นไปยัง DIV คุณสามารถรู้ระยะทางของ DIV ไปยังหน้าเว็บ var nowy = event.clienty-disy; var maxx = document.documentelement.clientwidth-obj.offsetWidth; // นี่คือ OffsetWidth ซึ่งเป็นความกว้างของ div ไม่ใช่ Offsetleft var maxy = document.documentelement.clientheight-obj.offSetheight; nowx = nowx <0? 0: nowx; // การตัดสินเหล่านี้เป็นเพียงการตัดสินว่าไม่มีขอบเขต nowy = nowy <0? 0: nowy; nowx = nowx> maxx? maxx: nowx; nowy = nowy> maxy? maxy: nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = nowx+"px"; // อย่าลืม+"px", style.left/top คือ obj.style.style.top = nowy+"px" ด้วย "px"; position.push ({x: nowx, y: nowy}); // บันทึก obj.innerhtml = "x:"+nowx+"y:"+nowy; // ดูการเปลี่ยนแปลงส่งคืนเท็จโดยสังหรณ์ใจ; - document.onmouseup = function () {dragif = false; // drag และบันทึก obj.innerhtml = "x:"+obj.offsetleft+"y:"+obj.offsettop; - oa.onclick = function () {ถ้า (position.length == 1) return; // เมื่อมีเพียงหนึ่งเดียวหมายความว่าตัวจับเวลา var ไม่ได้ถูกย้าย = setInterval (function () {var opos = position.pop (); opos? (obj.style.left = opos.x + "px", obj.style.top = opos.y + "px"): clearinterval กลับเท็จ; - -ประเด็นสำคัญสองสามข้อเพื่อให้ความสนใจกับ:
1. อาร์เรย์ตำแหน่ง VAR ชุดของจุด: จุดนี้เป็นจุดเคลื่อนที่ในมุมซ้ายบนของ DIV นั่นคือวิถีการเคลื่อนไหวที่เราบันทึกคือชุดของจุดในมุมซ้ายบนของ DIV, Offsetleft เป็นพิกัด X
2. ความยาวหรือระยะทางหลายระยะปรากฏในโปรแกรม: Offsetleft, ClientX, OffsetWidth, style.left, document.documentelement.clientWidth ฯลฯ ;
3. วิธีการกด (): เพิ่มองค์ประกอบในตอนท้ายของอาร์เรย์เปลี่ยนความยาวของอาร์เรย์และสิ้นสุด
4. วิธีการป๊อป (): ลบและส่งคืนองค์ประกอบสุดท้ายของอาร์เรย์ มีสองประเด็นสำคัญคือหนึ่ง: ส่งคืนองค์ประกอบสุดท้าย; อื่น ๆ : ลบองค์ประกอบและความยาวของอาร์เรย์จะเล็กลง
ด้วยวิธีนี้เราได้ตระหนักถึงการเล่นย้อนหลังดังนั้นจึงไม่จำเป็นต้องพูดถึงหลักการดำเนินการ หากเรามีการเล่นโดยตรงเราควรได้รับและลบค่าแรกของอาร์เรย์หรือไม่? ฮ่าฮ่าพยายามเขียนและอ่าน
ฉันต้องบอกว่ามันสะดวกสบายกว่าที่จะลากด้วยเมาส์ ไม่สะดวกเกินไปที่จะย้ายแป้นพิมพ์ คุณสามารถลากและลากด้วยเมาส์อย่างไร้รสนิยม ... ท้องฟ้าอยู่ในความงุนงงและมันจะร้อน แต่วันนี้ก็ดี ...