การลากและวางเป็นคุณสมบัติทั่วไปนั่นคือลากไปยังตำแหน่งอื่นหลังจากวัตถุจับภาพ
ใน HTML5 การลากและวางเป็นส่วนมาตรฐานและองค์ประกอบใด ๆ สามารถลากและลดลงได้
Internet Explorer 9+, Firefox, Opera, Chrome และ Safari รองรับการลาก
หมายเหตุ: Safari 5.1.2 ไม่รองรับการลากตัวอย่าง:
<! สไตล์> <script> ฟังก์ชั่น alowdrop (ev) {ev.preventdefault ();} การลากฟังก์ชั่น (ev) {ev.datatransfer.setData (text, evraget.id);} ฟังก์ชั่น op (ev) {ev var data = ev.datransfer.getData (ข้อความ); = drag1 src = img /bg_1.jpg draggable = true onDragStart = drag (เหตุการณ์) ความกว้าง = 300px heig ht = 180px /> </body> </html>ก่อนอื่นเพื่อให้องค์ประกอบถูกลากตั้งค่า คุณสมบัติ draggable เป็นจริง: <img draggable = true>
จากนั้นจะระบุว่าจะเกิดอะไรขึ้นเมื่อองค์ประกอบถูกลาก
ในตัวอย่างข้างต้น คุณสมบัติ onDragStart เรียกฟังก์ชั่นการลาก (เหตุการณ์) ซึ่งระบุข้อมูลที่ลาก
วิธีการ dataTransfer.setData () ตั้งค่าชนิดข้อมูลและค่าของข้อมูลการลากข้อมูล: ฟังก์ชั่น Drag (ev) {ev.DatAtRansfer.SetData (ข้อความ, ev.target.id);}ในตัวอย่างนี้ประเภทข้อมูลคือข้อความและค่าคือ ID (Drag1) ที่สามารถลากองค์ประกอบ
เหตุการณ์ ondragover กำหนดตำแหน่งที่จะวางข้อมูลที่ถูกลากค่าเริ่มต้นข้อมูล/องค์ประกอบไม่สามารถวางไว้ในองค์ประกอบอื่น ๆ หากคุณต้องการตั้งค่าตำแหน่งที่อนุญาตเราต้องป้องกันการประมวลผลเริ่มต้นขององค์ประกอบ
นี่คือการโทรหา Event.preventDefault () วิธีการ ของ เหตุการณ์ onDragover : event.preventDefault ()
เมื่อวางข้อมูลการลากเหตุการณ์การตกจะเกิดขึ้น
ในตัวอย่างข้างต้นแอตทริบิวต์ onDrop เรียกฟังก์ชั่น, drop (event):
ฟังก์ชั่นลดลง (ev) {ev.preventdefault ();รหัสคำอธิบาย:
เรียก PreventDefault () เพื่อหลีกเลี่ยงการประมวลผลเริ่มต้นของเบราว์เซอร์ (พฤติกรรมเริ่มต้นของเหตุการณ์ Drop ถูกเปิดในลิงค์)
รับข้อมูลที่ลากผ่าน วิธี dataTransfer.getData (ข้อความ) วิธีนี้จะกลับไปที่ข้อมูลประเภทเดียวกันในวิธี setData ()
Drag Data คือ ID ขององค์ประกอบการลาก (Drag1)
องค์ประกอบการลากเพิ่มเติมไปยังองค์ประกอบตำแหน่ง (องค์ประกอบเป้าหมาย)
ลากไปมา:หากคุณต้องการลากไปมาสองแห่งเพียงแค่แก้ไขรหัสด้านบน
เปลี่ยนรหัสในร่างกาย:
<body> <div id = div1 ondrop = drop (event) onDragover = allydrop (เหตุการณ์)> <img id = drag1 src = img/bg_1.jpg draggable = true vent) ความกว้าง = 300px ความสูง = 180px/> </div> <div id = div2 ondrop = drop (event) onDragover = leweldrop (เหตุการณ์)> </div> </body>
จากนั้นเพิ่ม#div2 ให้กับสไตล์สไตล์:
<style type = text/css> #div1, #div2 {width: 360px;สิ่งนี้สามารถลากไปมา
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้