API การลากและวาง (Drag and Drop) ของ HTML ช่วยให้สามารถลากและวางองค์ประกอบได้
Drag and Drop คืออะไร?
Drag and Drop คือฟีเจอร์ที่ให้ผู้ใช้สามารถ
“คลิกค้าง” แล้ว “ลาก” วัตถุหนึ่งไปยังตำแหน่งอื่นได้
ตัวอย่างเช่น การลากรูปภาพจากตำแหน่งหนึ่งไปยังอีกตำแหน่งในหน้าเว็บ
เบราว์เซอร์ที่สนับสนุน
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop API
ตัวอย่างด้านล่างเป็นตัวอย่างการลากและวางอย่างง่าย:
<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<img decoding="async" id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">
</body>
</html>
อาจดูซับซ้อน แต่เรามาลองทำความเข้าใจทีละส่วนของเหตุการณ์ลากและวาง
ทำให้องค์ประกอบสามารถลากได้
เพื่อให้องค์ประกอบสามารถลากได้ ให้ตั้งค่าแอตทริบิวต์
draggable เป็น true
<img id="img1" draggable="true">
หรือ
<p id="p1" draggable="true">ข้อความที่ลากได้</p>
สิ่งที่จะลาก – ondragstart และ setData()
จากนั้น เราต้องบอกให้เบราว์เซอร์รู้ว่าเวลาลาก จะให้ส่งข้อมูลอะไรไปด้วย
โดยใช้เหตุการณ์ (event) ondragstart ในโค้ดตัวอย่างข้างต้น <img> เรียกใช้ฟังก์ชันนี้:
dataTransfer.setData() จะบอกว่าข้อมูลที่ลากคืออะไร"text" คือชนิดของข้อมูลev.target.id คือค่าที่จะส่ง (ในที่นี้คือ id="img1")
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ระบุว่าจะ “วาง” ที่ไหน
โดยปกติ เบราว์เซอร์จะไม่ให้เอาข้อมูลมาวางในส่วนอื่นของหน้าเว็บ
ดังนั้นเราต้องเขียนคำสั่ง preventDefault() เพื่อ “อนุญาตให้วางได้”
function dragoverHandler(ev) {
ev.preventDefault();
}
ทำการ “วาง”
มื่อผู้ใช้ปล่อยวัตถุ จะเกิดเหตุการณ์ drop
เราจะจัดการมันด้วยฟังก์ชัน
dropHandler()
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
อธิบายทีละบรรทัด:
preventDefault()ป้องกันไม่ให้เบราว์เซอร์เปิดลิงก์หรือทำงานอื่นโดยอัตโนมัติgetData("text")ดึงค่าที่ตั้งไว้ตอนเริ่มลาก-
appendChild()เอาวัตถุที่ถูกลากมาวางในพื้นที่เป้าหมาย
ลากและวางรูปภาพไปมาระหว่างสอง<div>
วิธีลาก (และวาง) รูปภาพไปมาระหว่างสององค์ประกอบ
<div>:
<script>
function allowDrop(e){e.preventDefault();}
function drag(e){e.dataTransfer.setData("text",e.target.id);}
function drop(e){e.preventDefault();e.target.appendChild(document.getElementById(e.dataTransfer.getData("text"))); }
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="https://kb.hostatom.com/lesson/wp-content/uploads/2023/05/img_logo.jpg" draggable="true" ondragstart="drag(event)" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>