HTML ลากและวาง API
ใน HTML องค์ประกอบใดๆ สามารถลากและวางได้
ตัวอย่าง
ลากรูปภาพ W3Schools ลงในสี่เหลี่ยมผืนผ้า
ลากแล้ววาง
การลากและวางเป็นคุณสมบัติทั่วไป คือเมื่อคุณ "คว้า" วัตถุแล้วลากไปยังตำแหน่งอื่น
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับการลากและวางอย่างสมบูรณ์
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
ตัวอย่างการลากและวาง HTML
ตัวอย่างด้านล่างเป็นตัวอย่างการลากและวางอย่างง่าย:
ตัวอย่าง
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
อาจดูซับซ้อน แต่ให้ผ่านส่วนต่างๆ ของเหตุการณ์ลากแล้วปล่อย
สร้างองค์ประกอบที่ลากได้
ประการแรก: ในการทำให้องค์ประกอบสามารถลากได้ ให้ตั้งค่าdraggableแอตทริบิวต์เป็น true:
<img draggable="true">
สิ่งที่ต้องลาก - ondragstart และ setData()
จากนั้นระบุสิ่งที่ควรเกิดขึ้นเมื่อลากองค์ประกอบ
ในตัวอย่างข้างต้นondragstartแอตทริบิวต์เรียกใช้ฟังก์ชัน ลาก (เหตุการณ์) ซึ่งระบุข้อมูลที่จะลาก
วิธี การdataTransfer.setData()กำหนดชนิดข้อมูลและค่าของข้อมูลที่ลาก:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ในกรณีนี้ ชนิดข้อมูลคือ "ข้อความ" และค่าคือ id ขององค์ประกอบที่ลากได้ ("drag1")
ที่จะวาง - ondragover
เหตุการณ์ondragoverระบุตำแหน่งที่สามารถลากข้อมูลที่ลากได้
โดยค่าเริ่มต้น ข้อมูล/องค์ประกอบไม่สามารถทิ้งในองค์ประกอบอื่นได้ เพื่อให้มีการดรอป เราต้องป้องกันการจัดการเริ่มต้นขององค์ประกอบ
ทำได้โดยการเรียกevent.preventDefault()เมธอดสำหรับเหตุการณ์ ondragover:
event.preventDefault()
Do the Drop - ondrop
เมื่อข้อมูลที่ลากถูกทิ้ง จะเกิดเหตุการณ์การดรอปขึ้น
ในตัวอย่างข้างต้น คุณลักษณะ ondrop เรียกใช้ฟังก์ชัน drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
รหัสอธิบาย:
- โทร preventDefault() เพื่อป้องกันการจัดการข้อมูลเริ่มต้นของเบราว์เซอร์ (ค่าเริ่มต้นคือเปิดเป็นลิงค์เมื่อวาง)
- รับข้อมูลที่ลากด้วยเมธอด dataTransfer.getData() เมธอดนี้จะส่งคืนข้อมูลที่ตั้งค่าเป็นประเภทเดียวกันในเมธอด setData()
- ข้อมูลที่ลากคือรหัสขององค์ประกอบที่ลาก ("drag1")
- ผนวกองค์ประกอบที่ลากเข้าไปในองค์ประกอบการวาง
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีลาก (และวาง) รูปภาพไปมาระหว่างสององค์ประกอบ <div>: