แอตทริบิวต์ draggable และเหตุการณ์ dragstart
ทำให้องค์ประกอบลากได้และตอบสนองต่อ dragstart
แอตทริบิวต์ draggable และเหตุการณ์ dragstart เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
แอตทริบิวต์การลากได้
องค์ประกอบใด ๆ จะกลายเป็นแหล่งลากเมื่อกำหนด draggable="true" ลิงก์และรูปภาพลากได้โดยค่าเริ่มต้น ส่วนองค์ประกอบอื่น ๆ เช่น กล่อง รายการ และช่วงข้อความ ต้องกำหนดแอตทริบิวต์นี้อย่างชัดเจน draggable="false" จะยกเว้นองค์ประกอบนั้นจากการลากในตัวของเบราว์เซอร์
<div draggable="true" id="card">Drag me</div>เหตุการณ์เริ่มลาก
เมื่อผู้ใช้เริ่มลาก องค์ประกอบต้นทางจะส่งเหตุการณ์ dragstart นี่คือจุดที่คุณเริ่มต้นการลาก: บันทึกว่ารายการใดกำลังถูกย้าย ปรับรูปแบบตามต้องการ และเขียนข้อมูลลงในออบเจ็กต์ dataTransfer เพื่อให้เป้าหมายวางอ่านข้อมูลได้
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});ไม่มีเหตุการณ์เริ่มลากก็ไม่มีอะไรเกิดขึ้น
หากกำหนดให้องค์ประกอบลากได้ แต่ไม่เคยจัดการเหตุการณ์เริ่มลาก เบราว์เซอร์ก็ยังลากภาพเงาอยู่ แต่ไม่มีการกำหนดข้อมูล ดังนั้นเป้าหมายวางส่วนใหญ่จึงปฏิเสธการวาง จับคู่แอตทริบิวต์การลากได้กับตัวรับฟังเหตุการณ์เริ่มลากเสมอ และจัดเก็บตัวระบุอย่างน้อยหนึ่งรายการ
การกำหนด effectAllowed
e.dataTransfer.effectAllowed = "move" ในเหตุการณ์เริ่มลากจะจำกัดการดำเนินการให้เป็น "copy", "move", "link", "copyMove", "all" หรือ "none" การตั้งค่านี้กำหนดเคอร์เซอร์ที่เบราว์เซอร์แสดง และกำหนดค่า dropEffect ที่เป้าหมายอาจตั้งในภายหลัง
การเพิ่มสัญญาณแสดงผล
เพิ่มคลาส CSS ให้แหล่งลากเพื่อให้ดูจางลงขณะถูกลาก: card.classList.add("dragging") ลบคลาสออกในเหตุการณ์ dragend เพื่อยกเลิกรูปแบบ ไม่ว่าการวางจะสำเร็จหรือถูกยกเลิกด้วยปุ่ม Escape
ภาพลากแบบกำหนดเอง
ตามค่าเริ่มต้น เบราว์เซอร์จะลากภาพตัวอย่างโปร่งแสงของแหล่งลาก คุณสามารถแทนที่ได้ด้วย e.dataTransfer.setDragImage(node, offsetX, offsetY) โดยส่งองค์ประกอบ DOM ที่ซ่อนไว้หรือรูปภาพ เพื่อแสดงภาพตัวอย่างแบบกำหนดเองที่เคอร์เซอร์
const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setDragImage(ghost, 20, 20);
});เหตุการณ์สิ้นสุดการลาก
dragend จะทำงานที่แหล่งลากหลังการลากเสร็จสิ้น ไม่ว่าจะวางสำเร็จ วางบนเป้าหมายที่ไม่ถูกต้อง หรือยกเลิก ใช้เหตุการณ์นี้สำหรับเก็บกวาด เช่น ลบคลาสการลาก ซ่อนภาพตัวอย่างเงา และคืนค่าความทึบ
การตรวจจับการยกเลิก
ภายในเหตุการณ์สิ้นสุดการลาก ให้ตรวจสอบ e.dataTransfer.dropEffect หากค่าคือ "none" แสดงว่าไม่มีการวางเกิดขึ้น (เป้าหมายปฏิเสธ ผู้ใช้กด Escape หรือวางนอกหน้าเว็บ) มิฉะนั้นค่าจะเท่ากับการดำเนินการที่เป้าหมายวางเลือก ("move", "copy", "link")
การลากบนอุปกรณ์ระบบสัมผัส
การลากและวางในตัวของเบราว์เซอร์ออกแบบมาสำหรับเดสก์ท็อปเป็นหลัก บนอุปกรณ์ระบบสัมผัส API นี้แทบใช้งานไม่ได้หากไม่มีโพลีฟิลล์หรือสิ่งทดแทนที่อิงตามเหตุการณ์ตัวชี้ สำหรับส่วนติดต่อผู้ใช้การจัดลำดับใหม่ที่เหมาะกับอุปกรณ์เคลื่อนที่ ควรใช้ไลบรารีอย่าง SortableJS หรือไลบรารีที่ช่วยจัดการรูปแบบเหตุการณ์ทั้งสองแบบ
ข้อควรคำนึงด้านการเข้าถึง
การลากและวางในตัวไม่รองรับแป้นพิมพ์ — ผู้ใช้ที่ใช้แป้นพิมพ์เพียงอย่างเดียวไม่สามารถจัดลำดับรายการใหม่ได้ ต้องมีทางเลือกอื่นเสมอ เช่น ตัวจัดการปุ่มลูกศร ปุ่มเลื่อนขึ้น/เลื่อนลง หรือกล่องโต้ตอบสำหรับจัดลำดับใหม่ที่ควบคุมด้วยคุณลักษณะการเข้าถึง การลากและวางควรช่วยเสริม ไม่ใช่ใช้แทนที่
การปิดใช้ค่าเริ่มต้นของเบราว์เซอร์
การเลือกข้อความภายในองค์ประกอบที่ลากได้อาจรบกวนการลาก ใช้ CSS user-select: none และ -webkit-user-drag: element กับแหล่งลาก เพื่อให้เบราว์เซอร์ลากองค์ประกอบแทนการเลือกข้อความภายใน
ตรวจสอบความรู้
เหตุใดโดยปกติคุณจึงต้องผูกตัวรับฟังเหตุการณ์เริ่มลาก แม้ว่าแอตทริบิวต์ที่ทำให้องค์ประกอบลากได้เพียงอย่างเดียวจะทำให้องค์ประกอบนั้นลากได้อยู่แล้ว
สรุป
กำหนดแอตทริบิวต์ที่ทำให้แหล่งลากลากได้ และใช้เหตุการณ์เริ่มลากเพื่อเติมข้อมูลลงใน dataTransfer กำหนด effectAllowed และอาจกำหนดภาพลากแบบกำหนดเอง จับคู่กับเหตุการณ์สิ้นสุดการลากเพื่อเก็บกวาดรูปแบบ ให้ทางเลือกที่ใช้แป้นพิมพ์เพื่อการเข้าถึง และพิจารณาใช้โพลีฟิลล์สำหรับอุปกรณ์ระบบสัมผัส
คำถามที่พบบ่อย
บทเรียน “แอตทริบิวต์ draggable และเหตุการณ์ dragstart” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แอตทริบิวต์ draggable และเหตุการณ์ dragstart” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แอตทริบิวต์ draggable และเหตุการณ์ dragstart”
ทำให้องค์ประกอบลากได้และตอบสนองต่อ dragstart คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “แอตทริบิวต์ draggable และเหตุการณ์ dragstart” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แอตทริบิวต์ draggable และเหตุการณ์ dragstart
- เหตุการณ์ dragover และ drop
- ออบเจ็กต์ dataTransfer
- รายการลากเพื่อจัดลำดับใหม่ภาคปฏิบัติ