การลากและวางเป็นคุณสมบัติทั่วไปนั่นคือลากไปยังตำแหน่งอื่นหลังจากวัตถุจับภาพ
ใน HTML5 การลากและวางเป็นส่วนมาตรฐานและองค์ประกอบใด ๆ สามารถลากและลดลงได้
ก่อนอื่นคลิกตัวอย่างเล็ก ๆ : เรียกใช้ JavaScript เมื่อผู้ใช้เริ่มลาก <p> องค์ประกอบ
<p draggable = true onDragStart = myFunction (เหตุการณ์)> ลากฉัน!
เคล็ดลับ: ลิงก์และรูปภาพถูกลากโดยค่าเริ่มต้นและไม่จำเป็นต้องมีคุณสมบัติที่แยกออกได้
คำจำกัดความและการใช้งานเหตุการณ์ต่อไปนี้จะถูกทริกเกอร์ระหว่างกระบวนการลากและวาง:
Internet Explorer 9+, Firefox, Opera, Chrome และ Safari รองรับการลาก
หมายเหตุ: Safari 5.1.2 ไม่รองรับการลาก
ตัวอย่างโพสต์รหัสก่อนจากนั้นอธิบายทีละคน:
<doctype html> <html> <head> <title> html5 ลาก </title> <meta charset = utf-8> <style>#div1 {ความกว้าง: 350px; ชายแดน: 1px Solid #aaaaaaa;} </style> </head> <body> <p> การลาก img_w3slogo.gif รูปภาพไปยังกล่องสี่เหลี่ยม: </p> <div id = div1 ondrop = drop (event) onDragover = allowdDrop (แม้กระทั่ง t)> </div> <br> <img id = drag1 src = images/img_w3slogo ev.preventdefalt ();} การลากฟังก์ชั่น (ev) {ev.datransfer.setdata (ข้อความ, ev.target.id);} ฟังก์ชั่นลดลง (ev) {ev.preventdefault (); ;เอฟเฟกต์ของหน้าก่อนการลากคือ:
มาวิเคราะห์ความหมายของรหัสต่อไปนี้ด้านล่าง
ตั้งค่าองค์ประกอบสามารถลากและลดลงได้ก่อนอื่นเพื่อให้องค์ประกอบถูกลากตั้งค่าคุณสมบัติ draggable เป็นจริง:
<img draggable = true>สิ่งที่จะลาก ondragstart และ setdata ()
จากนั้นจะระบุว่าจะเกิดอะไรขึ้นเมื่อองค์ประกอบถูกลาก
ในตัวอย่างข้างต้นคุณสมบัติ onDragStart เรียกฟังก์ชั่นการลาก (เหตุการณ์) ซึ่งระบุข้อมูลที่ลาก
วิธีการ dataTransfer.setData () ตั้งค่าชนิดข้อมูลและค่าของข้อมูลการลากข้อมูล:
ฟังก์ชั่น Drag (ev) {ev.DatAtRansfer.SetData (ข้อความ, ev.target.id);}ในตัวอย่างนี้ประเภทข้อมูลคือข้อความและค่าคือ ID (Drag1) ที่สามารถลากองค์ประกอบ
จะวางที่ไหน-ondragoverเหตุการณ์ ondragover กำหนดตำแหน่งที่จะวางข้อมูลที่ถูกลาก
ค่าเริ่มต้นข้อมูล/องค์ประกอบไม่สามารถวางไว้ในองค์ประกอบอื่น ๆ หากคุณต้องการตั้งค่าตำแหน่งที่อนุญาตเราต้องป้องกันการประมวลผลเริ่มต้นขององค์ประกอบ
นี่คือการโทรหา Event.preventDefault () วิธีการของเหตุการณ์ ondragover: :):: :)::
Event.preventDefault ()การใส่
เมื่อวางข้อมูลการลากเหตุการณ์การตกจะเกิดขึ้น
ในตัวอย่างข้างต้นแอตทริบิวต์ onDrop เรียกฟังก์ชั่น, drop (event):
ฟังก์ชั่นลดลง (ev) {ev.preventdefault ();รหัสคำอธิบาย:
ผลลัพธ์ของการใช้งานดังแสดงในรูป:
วัตถุ DataTransferในระหว่างการดำเนินการลากเราสามารถใช้วัตถุ DataTransfer เพื่อส่งข้อมูลเพื่อดำเนินการอื่น ๆ บนข้อมูลเมื่อการดำเนินการลากสิ้นสุดลง
แอตทริบิวต์วัตถุ: ฟังก์ชั่น dragstart_handler (ev) {console.log (dragstart); = p1 draggable = true ondragstart = dragstart_handler (เหตุการณ์);> องค์ประกอบนี้สามารถดูได้ กำหนดข้อมูลของการลาก ฟังก์ชั่น dragstart_handler (ev) {// เพิ่มข้อมูลการลาก ev.datransfer.setData (ข้อความ/ธรรมดา, ev.target.id); ; กำหนดภาพลาก ฟังก์ชั่น dragstart_handler (ev) {// สร้างภาพแล้วใช้สำหรับการลากอิมเมจ (); img.src = 'example.gif'; กำหนดเอฟเฟกต์การลาก ฟังก์ชั่น dragstart_handler (ev) {// ตั้งค่าเอฟเฟกต์การลากเพื่อคัดลอก ev.datatransfer.dropeffect = copy;} กำหนดโซนดร็อป function dragover_handler (ev) {ev.preventdefault (); องค์ประกอบของ domine data = ev.datraNsfer.getData (ข้อความ); div> </body> ปัญหาการลากเบราว์เซอร์ Firefoxแต่ไปที่นี่และพบปัญหาในเบราว์เซอร์ Firefox:
การลากของ HTML5 ใช้ PreventDefault เพื่อป้องกันไม่ให้หน้าป๊อปอัพโผล่ขึ้นมา แต่ไม่ทำงานภายใต้ Firefox?
สารละลาย:
document.body.ondrop = ฟังก์ชั่น (เหตุการณ์) {event.preventdefault ();หรือสำหรับตัวอย่างข้างต้นมันเป็นไปได้ที่จะเพิ่มลงในวิธี ondrop:
ฟังก์ชั่นลดลง (ev) {ev.preventdefault ();ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้