เหตุการณ์ ondrop

เหตุการณ์ DOM DragEvent

คำนิยามและวิธีใช้

เมื่อองค์ประกอบที่สามารถเลื่อนไปมาหรือข้อความที่ถูกเลือกเลื่อนไปมาถูกจัดวางบนจุดเป้าหมายที่มีความถูกต้อง กิจกรรม ondrop จะเกิดขึ้น

การเลื่อนและวางเป็นฟีเจอร์ที่ติดตามกันมากที่สุดใน HTML5 นี้ คือเมื่อคุณ "จับ" วัตถุและเลื่อนมันไปยังตำแหน่งที่ต่างๆ หาก ถ้าคุณต้องการเรียนรู้มากขึ้น โปรดอ่านเรื่องเกี่ยวกับ HTML5 ขยายตามนี้

หมายเหตุ：เพื่อทำให้องค์ประกอบสามารถเลื่อนไปมาได้ ใช้ตัวแทน HTML ของเรา คุณสมบัติ draggable ของ HTML5。

คำแนะนำ：โดยปกติ ลิงก์และรูปภาพสามารถเลื่อนไปมาได้ และไม่จำเป็นต้องมีคุณสมบัติ draggable

ในแต่ละขั้นตอนของการเลื่อนและวาง มีกิจกรรมมากมายที่ใช้และอาจเกิดขึ้น

กิจกรรมที่ตรงต่อจุดเป้าหมายที่สามารถเลื่อนไปมา (ตัวเริ่มต้น) ดังนี้：

  • ondragstart - ระหว่างที่ผู้ใช้เริ่มเลื่อนองค์ประกอบ
  • ondrag - ระหว่างที่องค์ประกอบถูกเลื่อน
  • ondragend - ระหว่างที่ผู้ใช้เสร็จสิ้นการเลื่อนองค์ประกอบ

กิจกรรมที่ตรงต่อจุดเป้าหมายที่จัดวางบน

  • ondragenter - ระหว่างที่องค์ประกอบที่เลื่อนไปมาเข้าสู่จุดเป้าหมาย
  • ondragover - ระหว่างที่องค์ประกอบที่เลื่อนไปมาอยู่บนจุดเป้าหมาย
  • ondragleave - ระหว่างที่องค์ประกอบที่เลื่อนไปมาออกจากจุดเป้าหมาย
  • ondrop - ระหว่างที่องค์ประกอบที่เลื่อนไปมาถูกจัดวางบนจุดเป้าหมาย

ตัวอย่าง

เมื่อใส่องค์ประกอบที่สามารถเลื่อนไปมาใน <div> จะทำ JavaScript ดังนี้：

<div ondrop="myFunction(event)"></div>

ทดลองด้วยตัวเอง

มีตัวอย่าง TIY มากมายที่ด้านล่างของหน้า

รูปแบบ

ใน HTML ดังนี้：

<element ondrop="myScript">

ทดลองด้วยตัวเอง

ใน JavaScript ดังนี้：

object.ondrop = function(){myScript};

ทดลองด้วยตัวเอง

ใน JavaScript ใช้วิธี addEventListener() ดังนี้：

object.addEventListener("drop", myScript);

ทดลองด้วยตัวเอง

หมายเหตุ：อินเทอร์เน็ต อิกเชอร์ 8 หรือตัวเก่ากว่าไม่สนับสนุน addEventListener() method。

Technical details

Bubble: Supported
Cancelable: Supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM version: Level 3 Events

การสนับสนุนเบราเซอร์

ตารางในลงพิมพ์ระบุเวอร์ชั่นของเบราเซอร์ที่สนับสนุนเหตุนี้ทั้งหมดในครั้งแรก。

event Chrome IE Firefox Safari Opera
ondrop 4.0 9.0 3.5 6.0 12.0

ตัวอย่างเพิ่มเติม

การแสดงตัวของการลากและปล่อยทั้งหมดที่เป็นไปได้:

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- รายการเหตุที่เกิดขึ้นบนป้ายหมายที่ถูกลากและปล่อย ----------------- */
document.addEventListener("dragstart", function(event) {
  // สำเร็จการเลื่อน p องค์ประกอบ แล้วตั้งค่าข้อมูลที่ถูกลากและปล่อย ด้วยวิธี setData() ของ dataTransfer
  event.dataTransfer.setData("Text", event.target.id);
  // สำเร็จการเลื่อน p องค์ประกอบ แล้วพิมพ์ข้อความบางอย่าง
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // สำเร็จการเลื่อน p องค์ประกอบ แล้วเปลี่ยนความเปิดใช้งานขององค์ประกอบที่สามารถลากและปล่อย
  event.target.style.opacity = "0.4";
});
// สำเร็จการเลื่อน p องค์ประกอบ แล้วเปลี่ยนสีของข้อความที่แสดง
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// สำเร็จการเลื่อน p องค์ประกอบ แล้วพิมพ์ข้อความบางอย่างและตั้งค่าความเปิดใช้งาน
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- รายการเหตุการณ์ที่จะเกิดขึ้นบนจุดวาง ----------------- */
// ขณะที่ p ที่สามารถลากเข้ามาเข้าสู่ droptarget จะเปลี่ยนรูปแบบขอบ DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// โดยเริ่มต้นนั้น ไม่สามารถวางข้อมูล/องค์ประกอบในองค์ประกอบอื่นได้ สำหรับการอนุญาตให้วาง เราต้องป้องกันการจัดการปริมาณโดยเริ่มต้น
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ขณะที่ p ที่สามารถลากเข้ามาออกจาก droptarget จะปรับปรุงรูปแบบขอบ DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* ขณะวาง - ป้องกันการจัดการข้อมูลโดยปริมาณของเว็บเบราเซอร์ (เมื่อวางโดยปริมาณทางลิงก์)
ปรับปรุงสีของข้อความของออกเสียงและสีของขอบ DIV
ใช้วิธี dataTransfer.getData() ที่ได้รับข้อมูลที่ถูกลากเข้ามา
ข้อมูลที่ถูกลากเข้ามาคือ id ขององค์ประกอบที่ถูกลาก ("drag1")
ต่อขึ้นกับองค์ประกอบที่ถูกลากเข้ามาในองค์ประกอบที่จะทำการวาง
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

ทดลองด้วยตัวเอง

หน้าที่เกี่ยวข้อง

ตัวเรียน HTML: การเลื่อนย้าย 5 ของ HTML

HTML คู่มืออธิบาย: คุณสมบัติ draggable ของ HTML

เหตุการณ์ DOM DragEvent