Drag and Drop (DnD) แนวคิด UI อันทรงพลัง ทำให้คัดลอก จัดเรียง ลบรายการได้ง่ายด้วยเมาส์ HTML5 มี DnD API รองรับเนทีฟ ไม่ต้องพึ่ง jQuery หรือ JS ซับซ้อนเหมือน HTML4
ขั้นตอนการทำ Drag and Drop
ขั้นตอน 1: ทำให้วัตถุลากได้ (Draggable)
ตั้งค่า draggable="true" บนองค์ประกอบที่ต้องการลาก ตั้ง event listener dragstart เก็บข้อมูลที่ลาก กำหนด effect ที่อนุญาต (copy, move, link)
<!DOCTYPE HTML> <html> <head> <style> #boxA, #boxB { float:left;padding:10px;margin:10px; } #boxA { background:#50B948; width:75px; height:75px; } #boxB { background:#0000FF; width:150px; height:150px; } </style> <script> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.id); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } </script> </head> <body> <center> <h2>Drag and drop in HTML5</h2> <div>ลากกล่องเขียวได้</div> <div id="boxA" draggable="true" ondragstart="return dragStart(event)"> <p>Drag Me</p> </div> <div id="boxB">Dustbin</div> </center> </body> </html>
ขั้นตอน 2: รับการวาง (Dropping)
เป้ารับการวางต้องฟังเหตุการณ์อย่างน้อย 3 ตัว:
dragenter- กำหนดว่ารับการวางหรือไม่ (ต้องpreventDefault())dragover- กำหนด feedback ให้ผู้ใช้ (ต้องpreventDefault())drop- จัดการเมื่อวางจริง รับข้อมูลจากdataTransfer.getData()
<!DOCTYPE HTML> <html> <head> <style> ... </style> <script> function dragStart(ev) { ... } function dragEnter(ev) { ev.preventDefault(); return true; } function dragOver(ev) { ev.preventDefault(); return false; } function dragDrop(ev) { var src = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(src)); ev.stopPropagation(); return false; } </script> </head> <body> ... <div id="boxB" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" ondragover="dragOver(event)">Dustbin</div> ...
API หลัก: dataTransfer.setData(), dataTransfer.getData(), dataTransfer.effectAllowed, dataTransfer.dropEffect
