HTML Drag and Drop API

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

ใน HTML เราสามารถลากและวาง element ได้

ลากแล้ววาง (Drag and Drop)

การลากและวางเป็นคุณสมบัติทั่วไป เมื่อคุณ “หยิบ” วัตถุแล้วลากไปยังตำแหน่งอื่น

เบราว์เซอร์ที่สนับสนุน

ตัวเลขในตารางระบุถึงเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัติการลากและวางอย่างสมบูรณ์

APIChromeEdgeFirefoxSafariOpera
Drag and Drop4.09.03.56.012.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 ทั้งสอง


< บทเรียนก่อนหน้า
บทเรียนถัดไป >