วันนี้เราจะดูวิธีป้องกันการลากวัตถุจากการถูกลากออกจาก DIV บางตัวและการลากฟังก์ชั่นการดูดซับ
ครั้งสุดท้ายที่เราพูดคุยเกี่ยวกับการลากและลดลงเราไม่สามารถลากออกจากพื้นที่ภาพได้ บนพื้นฐานนี้เราเพิ่ม Div Parent เพื่อป้องกันไม่ให้ลากออกจากผู้ปกครอง หลักการเหมือนเดิมมันง่าย
รหัส HTML:
<div id = "div2"> <div id = "div1"> </div> </div>
รหัส CSS:
<style type = "text/css"> #div1 {width: 100px; ความสูง: 100px; ความเป็นมา: สีแดง; ตำแหน่ง: สัมบูรณ์; } #div2 {width: 400px; ความสูง: 300px; ความเป็นมา: #CCCCCC; ตำแหน่ง: ญาติ; } </style>รหัส JavaScript:
<script type = "text/javascript"> // drag และวาง div ที่ว่างเปล่า Firefox รุ่นต่ำมี bug window.onload = function () {var odiv = document.getElementById ("div1"); var odiv2 = document.getElementById ("div2"); 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; if (odivleft <0) {odivleft = 0; } อื่นถ้า (odivleft> odiv2.offsetWidth - odiv.offsetWidth) {odivleft = odiv2.offsetWidth - odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } อื่นถ้า (odivtop> odiv2.offsetheight - odiv.offsetheight) {odivtop = odiv2.offsetheight - odiv.offsetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; - document.onmouseup = function () {document.onmousemove = null; document.onmouseup = null; - กลับเท็จ; // บล็อกเหตุการณ์เริ่มต้นและแก้ไขข้อผิดพลาด Firefox}; - </script>การเรนเดอร์มีดังนี้:
มันง่าย
สิ่งต่อไปคือวิธีที่จะทำให้ดูดซับโดยอัตโนมัติ
ในความเป็นจริงสิ่งนี้มักใช้โดยผู้คน ตัวอย่างเช่นเมื่อมีหน้าต่างเล็ก ๆ ใน PS ลากไปที่ขอบของหน้ามันจะแนบโดยอัตโนมัติ
การลากและวางของเราจะมีฟังก์ชั่นดังกล่าวได้อย่างไร?
เรื่องนี้ถูกกล่าวถึงในระหว่างการออกกำลังกายมาก่อน มันเหมือนกับการนั่งแท็กซี่และคุณไม่สามารถปล่อยให้คนขับรถจอดได้อย่างแน่นอน เขาจะต้องจอดใกล้ปลายทาง
เช่นเดียวกันสำหรับโปรแกรม เช่นเดียวกับที่เกือบจะถึงเวลาที่จะไปถึงที่นั่นก็สามารถกำหนดได้โดยตรง สมมติว่าวัตถุที่ฉันลากอยู่ห่างออกไป 50px จากทางซ้ายฉันคิดว่ามันอยู่ทางซ้ายและถ้ามันถูกกำหนดโดยตรงกับ 0 มันจะดูดซับโดยอัตโนมัติ
หลักการนั้นง่ายมากมาดูกันว่ารหัสถูกนำไปใช้อย่างไร เพียงแค่ปรับเปลี่ยนเล็กน้อย
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var odiv2 = document.getElementById ("div2"); 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 || เหตุการณ์; var odivleft = oeVent.Clientx - disx; var odivtop = oEvent.Clienty - disy; // เมื่อเหลือน้อยกว่า 50 มันจะเป็น 0 โดยอัตโนมัติสิ่งนี้จะตระหนักถึงการดูดซับถ้า (odivleft <50) {odivleft = 0; } อื่นถ้า (odivleft> odiv2.offsetWidth - odiv.offsetWidth) {odivleft = odiv2.offsetWidth - odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } อื่นถ้า (odivtop> odiv2.offsetheight - odiv.offsetheight) {odivtop = odiv2.offsetheight - odiv.offsetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; - document.onmouseup = function () {document.onmousemove = null; document.onmouseup = null; - กลับเท็จ; - - </script>ครั้งต่อไปเราจะพูดคุยเกี่ยวกับแอปพลิเคชันขั้นสูงซึ่งจะรับผิดชอบและมีประโยชน์มากขึ้น ฟังก์ชั่นการลากและดร็อปของเราได้รับการปรับปรุงแล้ว
ตัวอย่างเช่นการลากรูปภาพและเลือกข้อความ ตัวอย่างเช่นมีเพียงหนึ่ง div ในหน้าลากที่เรากำลังใช้อยู่ซึ่งเราจะไม่พบในการพัฒนาปกติ
ในความเป็นจริงเมื่อมีบางสิ่งบางอย่างบนหน้าเว็บปัญหาอะไรจะเกิดขึ้นกับการลากนี้? - -
จะได้รับการแก้ไขในครั้งต่อไป ~ โปรดรอคอย