การตอบสนองด้วยภาพระหว่างลาก
กำหนดสไตล์ให้องค์ประกอบระหว่างการลาก
การตอบสนองด้วยภาพระหว่างลาก เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดการตอบสนองทางภาพจึงสำคัญ
การลากและวางที่ดีควรบอกผู้ใช้ว่ากำลังเกิดอะไรขึ้น รายการใดกำลังเคลื่อนที่ วางลงที่ใดได้บ้าง และการวางนั้นถูกต้องหรือไม่ หากไม่มีการตอบสนอง การโต้ตอบจะให้ความรู้สึกเหมือนทำงานผิดพลาด
การจัดรูปแบบรายการที่กำลังลาก
ลดความสว่างหรือปรับขนาดองค์ประกอบต้นทางใน dragstart เพื่อให้ผู้ใช้เห็นว่าตนเองเลือกสิ่งใดขึ้นมา
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));เหตุการณ์ลากเข้า
dragenter จะทำงานเมื่อรายการที่กำลังลากเข้าสู่เป้าหมายที่อาจใช้ได้ ใช้เหตุการณ์นี้เพื่อเน้นเขตวาง
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});เหตุการณ์ลากออก
dragleave จะทำงานเมื่อรายการออกจากเป้าหมาย ให้ลบการเน้นออกที่นี่
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});ปัญหาการกะพริบ
dragenter/dragleave จะทำงานกับองค์ประกอบลูกด้วย จึงทำให้เกิดการกะพริบ การใช้ตัวนับหรือการตรวจสอบ relatedTarget จะช่วยให้การเน้นคงที่
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });การรีเซ็ตเมื่อวาง
ล้างสถานะการเน้นในตัวจัดการ drop เสมอ เนื่องจาก dragleave อาจไม่ทำงานเมื่อวางสำเร็จ
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});การปรับแต่งภาพการลาก
setDragImage(element, offsetX, offsetY) ใน dragstart จะแทนที่ ghost เริ่มต้นด้วยองค์ประกอบใดก็ได้
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});เคอร์เซอร์ผ่าน dropEffect
เคอร์เซอร์ (เครื่องหมายบวกสำหรับ copy ลูกศรสำหรับการย้าย และสัญลักษณ์ไม่อนุญาตให้วาง) ถูกควบคุมโดย dropEffect ซึ่งตั้งค่าใน dragover ให้ปฏิเสธการวางที่ไม่ถูกต้องด้วย "none"
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});การแสดงตัวยึดตำแหน่งการวาง
ในรายการที่จัดเรียงได้ ให้แทรกองค์ประกอบตัวยึดตำแหน่ง ณ ตำแหน่งการวางที่คาดไว้ เพื่อให้ผู้ใช้เห็นอย่างชัดเจนว่ารายการจะไปอยู่ที่ใด
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}การคำนวณตำแหน่งการแทรก
เปรียบเทียบค่า Y ของตัวชี้กับจุดกึ่งกลางในแนวตั้งของแต่ละรายการ เพื่อตัดสินใจว่าจะวางก่อนหรือหลังรายการนั้น
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}การตอบสนองที่เข้าถึงได้
การบอกใบ้ด้วยภาพเพียงอย่างเดียวจะทำให้ผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอถูกกีดกัน ควรใช้การประกาศแบบสดของ ARIA และทางเลือกที่ใช้แป้นพิมพ์ควบคู่กับการลากและวาง เพื่อให้ทุกคนเข้าถึงได้
ตรวจสอบสั้น ๆ
ทดสอบการตอบสนองทางภาพ
สรุป: การตอบสนองทางภาพ
คุณจัดรูปแบบรายการที่กำลังลาก เน้นเขตวางด้วย dragenter/dragleave แก้ปัญหาการกะพริบด้วยตัวนับความลึก ปรับแต่งภาพการลาก ควบคุมเคอร์เซอร์ผ่าน dropEffect และแสดงตัวยึดตำแหน่งการวาง ขั้นต่อไปคือการลากไฟล์เข้ามา
คำถามที่พบบ่อย
บทเรียน “การตอบสนองด้วยภาพระหว่างลาก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตอบสนองด้วยภาพระหว่างลาก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตอบสนองด้วยภาพระหว่างลาก”
กำหนดสไตล์ให้องค์ประกอบระหว่างการลาก คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การตอบสนองด้วยภาพระหว่างลาก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การทำให้องค์ประกอบลากได้
- เป้าหมายการวางและ dataTransfer
- การตอบสนองด้วยภาพระหว่างลาก
- การลากไฟล์เข้าสู่หน้า