HTML5 ลากและวาง API เพื่อใช้รหัสตัวอย่างสำหรับการลากและวางเรียงลำดับ

HTML5 ให้การลากโดยตรงและ -Drop API ซึ่งสะดวกอย่างมากสำหรับเราในการบรรลุเอฟเฟกต์การลากและปล่อยเราไม่จำเป็นต้องเขียน JS จำนวนมาก เพื่อให้ได้ฟังก์ชั่นการลากและวางที่หลากหลาย

หากคุณต้องการลากและวางองค์ประกอบที่แน่นอนคุณต้องตั้งค่าคุณสมบัติ draggable ขององค์ประกอบเป็นจริง องค์ประกอบของ IMG และองค์ประกอบถูกตั้งค่าด้วยแอตทริบิวต์ draggable เป็น TRUE ซึ่งสามารถลากและลดลงโดยตรง

เหตุการณ์ลากและหล่นถูกสร้างขึ้นโดยองค์ประกอบที่แตกต่างกัน องค์ประกอบถูกลากและลดลงและในที่สุดเขาก็อาจไปถึงองค์ประกอบที่เขาต้องการวางไว้ในองค์ประกอบหลายอย่าง ที่นี่ฉันอ้างถึงองค์ประกอบของการลากและวางและองค์ประกอบของกระบวนการชั่วคราวและองค์ประกอบที่ฉันไปถึงเรียกว่าวัตถุเป้าหมาย วัตถุที่แตกต่างกันมีเหตุการณ์การลากและวางที่แตกต่างกัน

แหล่งที่มาวัตถุ:

1. DragStart: วัตถุต้นทางเริ่มลากและวาง
2. Drag: ระหว่างการลากและลดลงของวัตถุต้นทาง
3. Dragend: วัตถุต้นฉบับลากและลดลง

กระบวนการประมวลผล:

1. Dragenter: วัตถุต้นทางเริ่มเข้าสู่ช่วงของกระบวนการ
2. Dragover: วัตถุต้นทางเคลื่อนที่ภายในช่วงของกระบวนการ
3. Dragleave: ขอบเขตของวัตถุของแหล่งที่มาที่ออกจากกระบวนการ

วัตถุเป้าหมาย:

1. Drop: วัตถุต้นทางถูกลากและวางลงในวัตถุเป้าหมาย

 <div id = source draggable = true> องค์ประกอบ </div> <div id = process> b องค์ประกอบ </div> <div id = เป้าหมาย> องค์ประกอบ c </div> <script> var source = document.getElementById '( 'Source'), // a element proces = document.getElementById ('process'), // b element target = document.gelementById ('เป้าหมาย'); เหตุการณ์ DragStart ถูกสร้างขึ้นโดยองค์ประกอบ A เพื่อสร้าง console.log ('องค์ประกอบเริ่มถูกลาก');}, false) proces.addeventristener ('dragner', ฟังก์ชั่น (ev) {// เหตุการณ์ Dragenter ถูกสร้างขึ้นโดย B องค์ประกอบ. , false) target.addeventListener ('drop', ฟังก์ชั่น (ev) {// เหตุการณ์ drop ถูกสร้างขึ้นโดย console.log ('A องค์ประกอบถึงองค์ประกอบ C');) document.ondragover = function (e) {e.preventDefault ( );} </script>

วัตถุส่งข้อมูล DataTransfer มีให้ในเหตุการณ์การลาก -และ -Drop ทั้งหมดเพื่อส่งผ่านข้อมูลระหว่างวัตถุต้นทางและวัตถุเป้าหมาย ถัดไปทำความรู้จักกับวิธีการและคุณลักษณะของวัตถุนี้เพื่อทำความเข้าใจว่ามันส่งข้อมูลอย่างไร

วิธีนี้จะถูกเก็บไว้ในวัตถุ DataTransfer รับพารามิเตอร์สองพารามิเตอร์ตัวแรกระบุสตริงเพื่อจัดเก็บประเภทของข้อมูลและตอนนี้รองรับสิ่งต่อไปนี้:

1. ข้อความ/ธรรมดา: ข้อความข้อความ
2. ข้อความ/html: ข้อความ html
3. ข้อความ/XML: ข้อความ XML
4. ข้อความ/uri-list: รายการ URL, URL แต่ละรายการเป็นหนึ่งบรรทัด

พารามิเตอร์ที่สองคือข้อมูลที่จะเก็บไว้ ตัวอย่างเช่น:

 Event.datRansfer.setData ('text/plain', 'Hello World');

วิธีนี้อ่านข้อมูลจากวัตถุ DataTransfer พารามิเตอร์คือประเภทของข้อมูลที่ระบุใน setData ตัวอย่างเช่น:

 event.datraransfer.getData ('ข้อความ/ธรรมดา');

วิธีนี้จะลบข้อมูลที่เก็บไว้ในวัตถุ DataTransfer พารามิเตอร์เป็นตัวเลือกสำหรับชนิดข้อมูล หากพารามิเตอร์ว่างเปล่าให้ล้างข้อมูลทุกประเภท ตัวอย่างเช่น:

 Event.datRansfer.ClearData ();

วิธีนี้ถูกตั้งค่าเป็นไอคอนลากและวางโดยใช้องค์ประกอบ IMG รับพารามิเตอร์สามพารามิเตอร์แรกคือองค์ประกอบไอคอนที่สองคือการกระจัด x -axis ขององค์ประกอบไอคอนจากตัวชี้เมาส์และที่สามคือการกระจัด Y -axis ขององค์ประกอบไอคอนจากตัวชี้เมาส์ ตัวอย่างเช่น:

 var source = document.getElementById ('source'), icon = document.createelement ('img'); 10, -10)}, false)

คุณลักษณะทั้งสองนี้รวมกันเพื่อตั้งค่าเอฟเฟกต์ภาพของการลากและวาง

เป็นที่น่าสังเกตว่า IE ไม่สนับสนุนวัตถุ DataTransfer ใช่ไม่ว่าจะรองรับเวอร์ชันใด

การใช้ APIs Drag และ Drop นั้นคุ้นเคยกับข้างต้นแล้ว มาดูความคิดก่อน:

1. ในรายการเดียวแต่ละองค์ประกอบสามารถลากและลดลงได้และคุณสมบัติที่แยกออกได้ถูกตั้งค่าเป็นจริงสำหรับแต่ละองค์ประกอบ
2. การสำรวจเหตุการณ์ DragStart ของแต่ละองค์ประกอบเพื่อแยกความแตกต่างของสไตล์ของวัตถุต้นทาง
3. เมื่อตรวจสอบเหตุการณ์ Dragenter ของแต่ละองค์ประกอบเมื่อวัตถุต้นทางเข้าสู่องค์ประกอบปัจจุบันวัตถุแหล่งที่มาจะถูกเพิ่มก่อนองค์ประกอบ ด้วยวิธีนี้องค์ประกอบที่อยู่เบื้องหลังมันจะถูกบีบลงโดยวัตถุแหล่งที่มาเพื่อให้ได้เอฟเฟกต์การเรียงลำดับ
4. อย่างไรก็ตามจะพบได้ว่าวัตถุต้นทางไม่สามารถจัดอันดับได้เป็นชิ้นสุดท้ายและสามารถเป็นสองในรอบสุดท้ายเท่านั้น ในเวลานี้เหตุการณ์ Dragleave จะถูกตรวจสอบ

รหัสหลักมีดังนี้:

 var source = document.QuerySelectiverall ('. list'), dragelement = null; ) {dragelement = this;}, False); [i] .addeventListener ('dragleave', ฟังก์ชั่น (ev) {ถ้า (dragelement! = this) {ถ้า (this == this.parentnode.lastelementchildchild || this.parentnod e.lastchild) {this.parentnode.appendchild );}}, false)};

ที่อยู่รหัสเต็ม: drag-demo

ส่วนใหญ่เข้ากันได้ใน IE แต่อย่างน้อยก็สามารถลากและจัดเรียงอย่างน้อยใน IE10

และในการทดสอบอย่างง่ายของฉันพบว่าเมื่อองค์ประกอบไม่ได้ตั้งค่าใน IE เหตุการณ์ Dragleave จะไม่ถูกกระตุ้น

จุดที่สำคัญกว่าคือบน iOS และ Android ซึ่งไม่เข้ากันอย่างสมบูรณ์ โชคดีที่มีปลั๊กเพื่อให้เข้ากันได้อย่างสมบูรณ์แบบบนปลายมือถือ

ที่อยู่ปลั๊กอิน: iOS-HTML5-DRAG-DROP-SHIM

คุณจะต้องแนะนำปลั๊กในรหัสต้นฉบับเพื่อลากบนเทอร์มินัลมือถือ

 <script> var iosdragdropshim = {enablenerLave: true} </script> <script src = ผู้ขาย/ios-drop.js> </script>

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้