ใน HTML เราสามารถลากและวาง element ได้
ลากแล้ววาง (Drag and Drop)
การลากและวางเป็นคุณสมบัติทั่วไป เมื่อคุณ “หยิบ” วัตถุแล้วลากไปยังตำแหน่งอื่น
เบราว์เซอร์ที่สนับสนุน
ตัวเลขในตารางระบุถึงเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัติการลากและวางอย่างสมบูรณ์
API | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
ตัวอย่างการลากและวาง HTML
ตัวอย่างด้านล่างเป็นตัวอย่างการลากและวางอย่างง่าย:
<head>
<style>
#div1 {
width: 350px;
height: 110px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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>
<p>ลากรูปภาพ hostatom ลงในสี่เหลี่ยมผืนผ้า:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://kb.hostatom.com/wp-content/uploads/2023/05/img_logo.jpg" draggable="true" ondragstart="drag(event)" width="336">
</body>
</html>
ลากรูปภาพ hostatom ลงในสี่เหลี่ยมผืนผ้า:
วิธีการทำอาจดูซับซ้อน แต่มาดูส่วนต่างๆ ของการลากและวางกัน
ทำให้ element สามารถลากได้
ก่อนอื่น หากต้องการทำให้องค์ประกอบสามารถลากได้ ให้ตั้ง draggable ค่าแอตทริบิวต์เป็น true:
<img draggable="true">
สิ่งที่จะลาก – ondragstart และ setData()
หลังจากนั้นให้ทำการระบุว่าจะเกิดอะไรขึ้นเมื่อองค์ประกอบถูกลาก
ในตัวอย่างข้างต้น ondragstart แอตทริบิวต์เรียกฟังก์ชัน drag (event) ซึ่งระบุข้อมูลที่จะลาก
วิธีการกำหนดประเภทข้อมูลและค่าของข้อมูลที่ลาก dataTransfer.setData():
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ใน code ข้างบนชนิดข้อมูลคือ “ข้อความ” และค่าคือรหัสขององค์ประกอบที่ลากได้ (“drag1”)
วางที่ไหน – ondragover
ondragover event จะระบุตำแหน่งที่สามารถทิ้งข้อมูลที่ลากได้
ตามค่าเริ่มต้น ข้อมูล/องค์ประกอบไม่สามารถทิ้งในองค์ประกอบอื่นได้ เพื่อให้เกิดการลดลง เราต้องป้องกันการจัดการเริ่มต้นขององค์ประกอบ สิ่งนี้ทำได้โดยการเรียกใช้ event.preventDefault() วิธีการสำหรับ ondragover event:
event.preventDefault()
ทำ Drop – ondrop
เมื่อข้อมูลที่ลากถูกดรอป จะเกิด drop event
ในตัวอย่างข้างต้น แอตทริบิวต์ ondrop เรียกฟังก์ชัน drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
อธิบาย code :
- เรียก PreventDefault() เพื่อป้องกันการจัดการข้อมูลค่าเริ่มต้นของเบราว์เซอร์ (ค่าเริ่มต้นเปิดเป็นลิงก์เมื่อวาง)
- รับข้อมูลที่ลากด้วย method dataTransfer.getData() วิธีนี้จะส่งคืนข้อมูลใด ๆ ที่ถูกตั้งค่าเป็นประเภทเดียวกันใน method setData()
- ข้อมูลที่ลากคือรหัสขององค์ประกอบที่ลาก (“drag1”)
- กา่รผนวกองค์ประกอบที่ลากลงในองค์ประกอบการวาง
ตัวอย่างเพิ่มเติม
วิธีลาก (และวาง) รูปภาพไปมาระหว่างสององค์ประกอบ <div>:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<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>
<h2>การลากและวาง</h2>
<p>ลากรูปภาพไปมาระหว่างองค์ประกอบ div ทั้งสอง</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://kb.hostatom.com/wp-content/uploads/2023/05/img_logo.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
การลากและวาง
ลากรูปภาพไปมาระหว่างองค์ประกอบ div ทั้งสอง