ความคิดเห็น: Call PreventDefault () เพื่อหลีกเลี่ยงการประมวลผลข้อมูลเริ่มต้นของเบราว์เซอร์ (พฤติกรรมเริ่มต้นของเหตุการณ์การตกต่ำในรูปแบบลิงก์) และข้อมูลที่ลากได้รับผ่านวิธี dataTransfer.getData (ข้อความ) เพื่อนที่สนใจสามารถอ้างถึงได้
เอฟเฟกต์ดั้งเดิม
เอฟเฟกต์หลังจากลาก
รหัสมีดังนี้
[รหัส]
<! doctype html>
<html>
<head>
<style type = "text/css">
#div1, #div2
{ลอย: ซ้าย; ความกว้าง: 100px; ความสูง: 35px; มาร์จิ้น: 10px; ช่องว่าง: 10px; ชายแดน: 1px Solid #AAAAA;}
</style>
<script type = "text/javascript">
ฟังก์ชั่น leverddrop (ev)
-
ev.preventdefault ();
-
ฟังก์ชั่นลาก (EV)
-
ev.datransfer.setData ("ข้อความ", ev.target.id);
-
ฟังก์ชั่นลดลง (EV)
-
ev.preventdefault ();
var data = ev.DatAtRansfer.getData ("ข้อความ");
ev.target.appendchild (document.getElementById (data));
-
</script>
</head>
<body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" onDragStart = "drag (event)"/>>>>> >>
<div ondrop = "drop (event)" onDragover = "lewaldrop (เหตุการณ์)">
</div>
<div ondrop = "drop (event)" onDragover = "lewaldrop (event)"> </div>
</body>
</html>
[/รหัส]
มันอาจดูซับซ้อนเล็กน้อย แต่เราสามารถศึกษาส่วนต่าง ๆ ของเหตุการณ์การลากและวางแยกต่างหาก
ตั้งค่าองค์ประกอบเป็น drag-drop
ก่อนอื่นเพื่อให้องค์ประกอบ draggable ตั้งค่าคุณสมบัติ draggable เป็นจริง:
<img draggable = "true" />
สิ่งที่ต้องลาก - onDragStart และ setData ()
จากนั้นระบุสิ่งที่เกิดขึ้นเมื่อมีการลากองค์ประกอบ
ในตัวอย่างด้านบนคุณสมบัติ onDragStart เรียกใช้ฟังก์ชัน Drag (เหตุการณ์) ซึ่งระบุข้อมูลที่ถูกลาก
เมธอด dataTransfer.setData () ตั้งค่าชนิดข้อมูลและค่าของข้อมูลที่ลาก:
ฟังก์ชั่นลาก (EV)
-
ev.datransfer.setData ("ข้อความ", ev.target.id);
-
ในตัวอย่างนี้ชนิดข้อมูลคือข้อความและค่าคือ ID ขององค์ประกอบที่แยกออกได้ (Drag1)
สถานที่ที่จะใส่ - ondragover
เหตุการณ์ ondragover ระบุตำแหน่งที่จะวางข้อมูลที่ลาก
โดยค่าเริ่มต้นข้อมูล/องค์ประกอบไม่สามารถวางไว้ในองค์ประกอบอื่น ๆ หากคุณต้องการตั้งค่าการอนุญาตเราจะต้องบล็อกการจัดการองค์ประกอบเริ่มต้น
สิ่งนี้ทำได้โดยการโทรหา Event.PreventDefault () วิธีการของเหตุการณ์ onDragover:
Event.preventDefault ()
สร้างตำแหน่ง - ondrop
เหตุการณ์ดร็อปเกิดขึ้นเมื่อวางข้อมูลดร็อป
ในตัวอย่างข้างต้นคุณสมบัติ ondrop เรียกฟังก์ชั่น, drop (event):
ฟังก์ชั่นลดลง (EV)
-
ev.preventdefault ();
var data = ev.DatAtRansfer.getData ("ข้อความ");
ev.target.appendchild (document.getElementById (data));
-
รหัสคำอธิบาย:
Call PreventDefault () เพื่อหลีกเลี่ยงการประมวลผลข้อมูลเริ่มต้นของเบราว์เซอร์ (พฤติกรรมเริ่มต้นของเหตุการณ์การตกต่ำในรูปแบบลิงก์) เพื่อรับข้อมูลที่ลากผ่านวิธี datatransfer.getData (ข้อความ) วิธีนี้ส่งคืนข้อมูลใด ๆ ที่ตั้งค่าเป็นประเภทเดียวกันในเมธอด setData () ข้อมูลที่ถูกลากคือ ID ขององค์ประกอบที่ลาก (Drag1) ต่อท้ายองค์ประกอบที่ลากเข้ากับองค์ประกอบตำแหน่ง (องค์ประกอบเป้าหมาย)