เหตุการณ์ ondragleave

เหตุการณ์ DOM DragEvent

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

เมื่ออิเลเมนต์ที่สามารถลากเคลื่อนได้หรือข้อความที่ถูกเลือกออกจากจุดปลายทางที่มีอิทธิพล จะเกิดเหตุการณ์ ondragleave

เหตุการณ์ ondragenter และ ondragleave ช่วยผู้ใช้เข้าใจว่าอิเลเมนต์ที่สามารถลากเคลื่อนได้กำลังเข้าหรือออกจากจุดปลายทาง ตัวอย่างเช่น สามารถตั้งสีพื้นหลังเมื่ออิเลเมนต์เข้าสู่จุดปลายทาง และเอาสีออกเมื่ออิเลเมนต์ออกจากจุดปลายทาง

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

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

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

ในช่วงที่เกิดปฏิบัติการลากเคลื่อน มีหลายเหตุการณ์ที่จะถูกใช้และอาจเกิดขึ้น:

เหตุการณ์ที่จะเกิดขึ้นบนเป้าหมายที่สามารถลากเคลื่อนได้ (อิเลเมนต์ต้น):

  • ondragstart - มีเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้เริ่มลากเคลื่อนอิเลเมนต์
  • ondrag - มีเหตุการณ์ที่เกิดขึ้นเมื่ออิเลเมนต์ถูกลากเคลื่อน
  • ondragend - มีเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้เสร็จสิ้นการลากเคลื่อนอิเลเมนต์

เหตุการณ์ที่จะเกิดขึ้นบนจุดปลายทางที่จัดให้ลากเคลื่อนได้:

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

ตัวอย่าง

ปฏิบัติการ JavaScript จะทำงานเมื่ออิเลเมนต์ที่สามารถลากเคลื่อนได้ถูกย้ายออกจากจุดปลายทาง

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

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

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

รูปแบบ

ใน HTML ดังนี้：

<element ondragleave="myScript">

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

ใน JavaScript ดังนี้：

object.ondragleave = function(){myScript};

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

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

object.addEventListener("dragleave", myScript);

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

หมายเหตุ：Internet Explorer 8 หรือตัวเก่ากว่าไม่สนับสนุน addEventListener() วิธี。

Technical Details

Bubble: Supported
Cancelable: Not Supported
Event Type: DragEvent
HTML Tags Supported: ทั้งหมด HTML Elements
DOM Version: Level 3 Events

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางบ่งชี้สูตรแรกที่สนับสนุนเหตุการณ์นี้

Event Chrome IE Firefox Safari Opera
ondragleave 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) {
  // วิธี dataTransfer.setData() กำหนดชนิดของข้อมูลและค่าของข้อมูลที่ถูกลอยยนะ
  event.dataTransfer.setData("Text", event.target.id);
  // ออกข้อความบางอย่างเมื่อเริ่มเลื่อนอิเลเมนต์ p
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // แก้ไขความเปิดใช้งานค่าของอิเลเมนต์ที่สามารถลอยยนะ
  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";
});
/* ----------------- รายการเหตุการณ์ที่เกิดขึ้นบนจุดวาง ----------------- */
// ปรับปรุงรูปแบบของขอบ DIV ขณะที่องค์ประกอบที่สามารถลากมาที่องค์ประกอบ droptarget เข้ามา
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// โดยเริ่มต้นนั้น ไม่สามารถวางข้อมูล/องค์ประกอบในองค์ประกอบอื่นได้ ในการที่จะอนุญาตให้วาง เราต้องหยุดการจัดการโดยเริ่มต้นขององค์ประกอบ
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ปรับปรุงรูปแบบของขอบ DIV ขณะที่องค์ประกอบที่สามารถลากมาที่องค์ประกอบ droptarget ออก
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 ความรู้: HTML5 ย้าย-วาง

HTML คู่มืออ้างอิง: HTML draggable 属性

เหตุการณ์ DOM DragEvent