HTML Academy · บทเรียน

ออบเจ็กต์ dataTransfer

ถ่ายโอนข้อมูลระหว่างแหล่งลากและเป้าหมายการวาง

ออบเจ็กต์ dataTransfer เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

dataTransfer เก็บอะไรไว้

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

setData และ getData

แหล่งลากเขียนข้อมูลที่มีชนิดกำกับด้วย e.dataTransfer.setData(format, value) ส่วนเป้าหมายอ่านข้อมูลด้วย e.dataTransfer.getData(format) อาร์กิวเมนต์ทั้งสองเป็นสตริง และค่าจะถูกแปลงเป็นสตริงก่อนจัดเก็บ

src.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", "hello");
  e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});

ชนิด MIME หลายชนิด

การจัดเก็บข้อมูลเดียวกันไว้ภายใต้ชนิดหลายชนิดทำให้การลากทำงานร่วมกับระบบอื่นได้: "text/plain" ใช้ได้ในเครื่องมือแก้ไขข้อความใด ๆ "text/uri-list" เป็นที่รู้จักในเบราว์เซอร์ว่าเป็น URL และ "text/html" จะคงรูปแบบไว้ในโปรแกรมประมวลผลคำ เป้าหมายจะเลือกชนิดที่ตนเองเข้าใจ

ข้อจำกัดการอ่านนอกการวาง

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

รายการไฟล์

เมื่อผู้ใช้ลากจากเดสก์ท็อป e.dataTransfer.files จะเป็น FileList ที่ประกอบด้วยออบเจ็กต์ File รายการนี้จะว่างเปล่าสำหรับการลากที่เริ่มจากภายในหน้าเว็บ ให้ถือว่านี่เป็นวิธีมาตรฐานในการตรวจจับการวางไฟล์จากภายนอก และเข้าถึงขนาด ชื่อ และชนิดของไฟล์

คอลเลกชันรายการ

e.dataTransfer.items แสดงทั้งสตริงและไฟล์ในรูปของออบเจ็กต์ DataTransferItem แต่ละรายการมี kind ("string" หรือ "file") type (MIME) และ getAsString(cb) / getAsFile() รายการนี้เป็นทางเลือกสมัยใหม่ที่รู้จักชนิดข้อมูล สำหรับใช้แทน files ร่วมกับ getData

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  } else {
    item.getAsString((s) => console.log(item.type, s));
  }
}

effectAllowed เทียบกับ dropEffect

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

ภาพลากแบบกำหนดเอง

e.dataTransfer.setDragImage(node, x, y) จะแทนที่ภาพเงาเริ่มต้น ส่งองค์ประกอบ DOM นอกพื้นที่แสดงผลที่จัดรูปแบบตามต้องการ พร้อมระยะเยื้องของเคอร์เซอร์เมื่อเทียบกับองค์ประกอบนั้น การเปลี่ยนแปลงนี้มีผลเฉพาะการลากครั้งปัจจุบัน

clearData

e.dataTransfer.clearData() ล้างข้อมูลทุกชนิด ส่วน clearData("text/plain") จะล้างข้อมูลเพียงชนิดเดียว โดยทั่วไปไม่ค่อยจำเป็น เพราะ dataTransfer ถูกสร้างใหม่สำหรับการลากแต่ละครั้ง แต่มีประโยชน์เมื่อคุณเริ่มเติมข้อมูลแล้วตัดสินใจยกเลิก

พฤติกรรมข้ามต้นทาง

ไฟล์ที่ลากจากหน้าหนึ่งซึ่งอยู่บนต้นทาง A ไปยังหน้าหนึ่งบนต้นทาง B ยังคงถูกส่งไปได้ — API ทำงานข้ามต้นทาง อย่างไรก็ตาม หน้าที่รับจะเห็นเฉพาะสิ่งที่แหล่งลากใส่ไว้ใน dataTransfer อย่างชัดเจนเท่านั้น ระบบจะไม่อนุญาตให้เข้าถึง DOM โดยพลการ

ลากจากเบราว์เซอร์ไปยังเดสก์ท็อป

ด้วยการเขียนชนิด "DownloadURL" (setData("DownloadURL", "image/png:filename.png:https://...")) หน้าเว็บสามารถให้ผู้ใช้ลากไฟล์ออกจากเบราว์เซอร์ไปยังเดสก์ท็อปได้ การรองรับมีจำกัด (เฉพาะเบราว์เซอร์ที่ใช้ Chromium) จึงควรตรวจสอบและเปลี่ยนไปใช้ทางเลือกสำรองอย่างเหมาะสม

ตรวจสอบความรู้

เหตุใด dataTransfer.getData() จึงไม่ได้รับอนุญาตให้ส่งคืนค่าที่จัดเก็บจริงระหว่างเหตุการณ์ลากผ่าน

สรุป

dataTransfer เป็นสะพานเชื่อมระหว่างแหล่งลากกับเป้าหมายการวาง ใช้ setData/getData สำหรับข้อมูลสตริงที่มีชนิด ใช้รายการสำหรับมุมมองรวมของไฟล์และสตริง ใช้ไฟล์สำหรับการวางจากเดสก์ท็อป ใช้ setDragImage สำหรับภาพตัวอย่างแบบกำหนดเอง และใช้ effectAllowed/dropEffect เพื่อเจรจารูปแบบการทำงาน

คำถามที่พบบ่อย

บทเรียน “ออบเจ็กต์ dataTransfer” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ออบเจ็กต์ dataTransfer” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ออบเจ็กต์ dataTransfer”

ถ่ายโอนข้อมูลระหว่างแหล่งลากและเป้าหมายการวาง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ออบเจ็กต์ dataTransfer” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy