วิธีใช้ HTML Drag and Drop API

วิธีใช้ HTML Drag and Drop API
ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

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





MUO วิดีโอประจำวันนี้ เลื่อนเพื่อดำเนินการต่อด้วยเนื้อหา

พื้นฐานของการลากและวางใน HTML

ในระบบลากและวางทั่วไป มีองค์ประกอบอยู่ 2 ประเภท ประเภทแรกประกอบด้วยองค์ประกอบที่ลากได้ซึ่งผู้ใช้สามารถเคลื่อนที่ได้ด้วยเมาส์ และประเภทที่สองประกอบด้วยองค์ประกอบที่สามารถวางได้ ซึ่งโดยทั่วไปจะระบุตำแหน่งที่ผู้ใช้สามารถวางองค์ประกอบได้



หากต้องการใช้การลากและวาง คุณต้องบอกเบราว์เซอร์ว่าองค์ประกอบใดที่คุณต้องการให้ลากได้ หากต้องการให้ผู้ใช้ลากองค์ประกอบได้ องค์ประกอบนั้นควรมี ลากได้ แอตทริบิวต์ HTML ตั้งค่าให้ จริง , แบบนี้:





 <div draggable="true">This element is draggable</div>

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

ลากองค์ประกอบพร้อมรูปภาพ

คุณสามารถปรับแต่งรูปภาพนี้ได้โดยการจัดหารูปภาพของคุณเองแทน ในการดำเนินการนี้ ให้เลือกองค์ประกอบที่สามารถลากได้จาก DOM สร้างรูปภาพใหม่เพื่อแสดงรูปภาพคำติชมที่กำหนดเอง และเพิ่ม ลากเริ่ม ลากฟังเหตุการณ์เช่นนี้:



 let img = new Image(); 
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png'; 
 
document.querySelector('div').addEventListener('dragstart', (event)=>{ 
    event.dataTransfer.setDragImage(img, 10, 10); 
})

ในบล็อกโค้ดด้านบน setDragImage วิธีการมีสามพารามิเตอร์ พารามิเตอร์แรกอ้างอิงรูปภาพ พารามิเตอร์อื่นๆ แสดงถึงออฟเซ็ตแนวนอนและแนวตั้งของภาพตามลำดับ เมื่อคุณเรียกใช้โค้ดในเบราว์เซอร์และเริ่มลากองค์ประกอบ คุณจะสังเกตเห็นว่ารูปภาพลากแบบกำหนดเองได้ถูกแทนที่ด้วยชุดรูปภาพแบบกำหนดเองก่อนหน้านี้

ภาพประกอบแสดงภาพลากแบบกำหนดเอง

หากคุณต้องการอนุญาตให้มีการลดลง คุณต้องป้องกันการทำงานเริ่มต้นโดยการยกเลิกทั้งสองอย่าง ทนได้มากขึ้น และ ดราโกเวอร์ เหตุการณ์เช่นนี้:



 const dropElement = document.querySelector("drop-target"); 
 
dropElement.addEventListener("dragenter", (ev) => { 
  ev.preventDefault(); 
}); 
 
dropElement.addEventListener("dragover", (ev) => { 
  ev.preventDefault(); 
});

ทำความเข้าใจกับอินเทอร์เฟซ DragEvent

คุณสมบัติจาวาสคริปต์ DragEvent อินเทอร์เฟซที่แสดงถึงการโต้ตอบแบบลากและวางจากผู้ใช้ ด้านล่างนี้คือรายการประเภทเหตุการณ์ที่เป็นไปได้ภายใต้ DragEvent อินเตอร์เฟซ.

  • ลาก : ผู้ใช้ยิงเหตุการณ์นี้ขณะลากองค์ประกอบ
  • แบก : เหตุการณ์นี้เกิดขึ้นเมื่อการดำเนินการลากสิ้นสุดลงหรือเมื่อผู้ใช้ขัดจังหวะ การลากโดยทั่วไปสามารถสิ้นสุดได้โดยปล่อยปุ่มเมาส์หรือกดปุ่ม Escape
  • ทนได้มากขึ้น : องค์ประกอบที่ลากจะทริกเกอร์เหตุการณ์นี้เมื่อเข้าสู่เป้าหมายการวางที่ถูกต้อง
  • ลาก่อน : เมื่อองค์ประกอบที่ถูกลากออกจากเป้าหมายการวาง เหตุการณ์นี้จะเริ่มทำงาน
  • ดราโกเวอร์ : เมื่อผู้ใช้ลากองค์ประกอบที่ลากได้ไปไว้เหนือเป้าหมายการวาง เหตุการณ์จะเริ่มทำงาน
  • ลากเริ่ม : เหตุการณ์เกิดขึ้นเมื่อเริ่มต้นการดำเนินการลาก
  • หยด : ผู้ใช้ทริกเกอร์เหตุการณ์นี้เมื่อพวกเขาวางองค์ประกอบลงบนเป้าหมายการวาง