Internet Explorer 9, Firefox, Opera 12, Chrome และ Safari 5 สนับสนุนการลากและวาง
หมายเหตุ: อย่ารองรับการลากใน Safari 5.1.2 HTML5 ลากและวางอินสแตนซ์ <HTML> <html> <wead> <style type = text/css> #div1 {width: 488px; JavaScript> function leverdrop (ev) {ev.preventdefault ();} การลากฟังก์ชั่น (ev) {ev.datransfer.setData (ข้อความ, ev.target.id); ev.datransfer.getData (ข้อความ); = drop (event) onDragover = allowdrop (เหตุการณ์)> div> <br/> <img id = drag1 src = http: //www.aseoe.com/statics/images /eoe/logo.png draggable = true onDragStart = drag (เหตุการณ์)/> </body> </html> ตั้งค่าองค์ประกอบที่จะลากและวางก่อนอื่นเพื่อให้องค์ประกอบถูกลากตั้งค่าคุณสมบัติ draggable เป็นจริง:
สิ่งที่จะลาก 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 (); รหัสคำอธิบาย:เรียก PreventDefault () เพื่อหลีกเลี่ยงการประมวลผลเริ่มต้นของเบราว์เซอร์ (พฤติกรรมเริ่มต้นของเหตุการณ์ Drop ถูกเปิดในลิงค์)
รับข้อมูลที่ลากผ่านวิธี dataTransfer.getData (ข้อความ) วิธีนี้จะกลับไปที่ข้อมูลประเภทเดียวกันในวิธี setData ()
Drag Data คือ ID ขององค์ประกอบการลาก (Drag1)
องค์ประกอบการลากเพิ่มเติมไปยังองค์ประกอบตำแหน่ง (องค์ประกอบเป้าหมาย)
สรุปข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้