เป้าหมายการวางและ dataTransfer
ยอมรับการวางและถ่ายโอนข้อมูล
เป้าหมายการวางและ dataTransfer เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
อะไรทำให้เป็นเป้าหมายการวาง
ตามค่าเริ่มต้น องค์ประกอบจะปฏิเสธการวาง หากต้องการยอมรับการวาง คุณต้องป้องกันพฤติกรรมเริ่มต้นทั้งใน dragover และ drop นี่คือจุดที่มักพลาดมากที่สุด
การอนุญาตให้วางด้วยเหตุการณ์ลากผ่าน
เบราว์เซอร์จะบล็อกการวาง เว้นแต่คุณจะเรียก preventDefault() ในตัวจัดการเหตุการณ์ dragover หากไม่ทำเช่นนั้น เหตุการณ์ drop จะไม่ทำงานเลย
const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // REQUIRED to allow drop
});เหตุการณ์การวาง
เมื่อผู้ใช้ปล่อยสิ่งที่ลากไว้เหนือเป้าหมายที่ถูกต้อง เหตุการณ์ drop จะทำงาน คุณต้องป้องกันการทำงานเริ่มต้นที่นี่ด้วย (เพื่อป้องกันไม่ให้เบราว์เซอร์เปิดไฟล์หรือที่อยู่เว็บที่วางลงมา) แล้วจึงอ่านข้อมูล
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
console.log("Dropped", id);
});การอ่าน dataTransfer
getData(format) จะเรียกข้อมูลที่บันทึกไว้ใน dragstart สตริงรูปแบบต้องตรงกับรูปแบบที่ตั้งไว้
const payload = e.dataTransfer.getData("text/plain");การย้ายองค์ประกอบ
กรณีการใช้งานแบบคลาสสิกคือ เพิ่มโหนดที่กำลังลากลงในเขตวาง โดยใช้รหัสที่คุณส่งไป
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
zone.appendChild(dragged);
});รูปแบบข้อมูลหลายแบบ
dataTransfer สามารถเก็บข้อมูลได้หลายรูปแบบพร้อมกัน เช่น text/plain และ application/json จากนั้นเป้าหมายจะอ่านรูปแบบที่ตนเองเข้าใจ
e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));การตั้งค่า dropEffect
ใน dragover ให้ตั้งค่า dropEffect เป็น "copy", "move" หรือ "link" เพื่อควบคุมเคอร์เซอร์และความหมายของการดำเนินการ
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});effectAllowed เทียบกับ dropEffect
effectAllowed (กำหนดโดยแหล่งต้นทาง) จะระบุว่าสามารถทำอะไรได้บ้าง ส่วน dropEffect (กำหนดโดยเป้าหมาย) จะเลือกหนึ่งรายการจากนั้น ทั้งสองค่าทำงานร่วมกันเพื่อแสดงเคอร์เซอร์ที่ถูกต้อง
การจัดลำดับรายการใหม่
รวมตำแหน่งการวางเข้ากับการแทรก เพื่อจัดลำดับรายการใหม่ ให้พิจารณาว่าควรแทรกรายการก่อนหรือหลังองค์ประกอบที่อยู่ใต้เคอร์เซอร์
list.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
list.insertBefore(dragged, e.target);
});การระบุเป้าหมายการวาง
ใช้ e.target (องค์ประกอบที่อยู่ใต้ตัวชี้) และ closest() เพื่อค้นหาคอนเทนเนอร์ที่เกี่ยวข้องเมื่อมีเป้าหมายซ้อนกัน
zone.addEventListener("drop", (e) => {
const slot = e.target.closest(".slot");
if (slot) slot.appendChild(getDragged(e));
});การล้างข้อมูล
dataTransfer.clearData() จะล้างข้อมูลที่เก็บไว้ทั้งหมด หากส่งรูปแบบไปด้วย จะล้างเฉพาะรูปแบบนั้น ที่เก็บข้อมูลจะถูกรีเซ็ตโดยอัตโนมัติหลังการลากอยู่แล้ว
e.dataTransfer.clearData("text/plain");ตรวจสอบสั้น ๆ
ทดสอบเป้าหมายการวาง
สรุป: เป้าหมายการวางและ dataTransfer
คุณสร้างเขตวางโดยเรียก preventDefault() ใน dragover และ drop อ่าน payload ด้วย getData ย้ายและจัดลำดับองค์ประกอบใหม่ ตั้งค่า dropEffect และจัดการเป้าหมายที่ซ้อนกัน ขั้นต่อไปคือการตอบสนองทางภาพ
คำถามที่พบบ่อย
บทเรียน “เป้าหมายการวางและ dataTransfer” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เป้าหมายการวางและ dataTransfer” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เป้าหมายการวางและ dataTransfer”
ยอมรับการวางและถ่ายโอนข้อมูล คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “เป้าหมายการวางและ dataTransfer” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การทำให้องค์ประกอบลากได้
- เป้าหมายการวางและ dataTransfer
- การตอบสนองด้วยภาพระหว่างลาก
- การลากไฟล์เข้าสู่หน้า