HTML DOM DragEvent

HTML DOM DragEvent เป็นเหตุการณ์ประเภทหนึ่งที่ได้รับการดำเนินการเมื่อใดก็ตามที่มีการลากและวางข้อความที่เลือก เหตุการณ์นี้ถูกนำมาใช้ใน HTML5

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติของ HTML DOM DragEvent -

คุณสมบัติ	คำอธิบาย
การถ่ายโอนข้อมูล	เพื่อส่งคืนข้อมูลที่ผู้ใช้ลากหรือวาง

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ DragEvent -

Object.DragEventType= function_name;

ในที่นี้ function_name คือฟังก์ชันที่เราต้องการให้ดำเนินการกับเหตุการณ์ที่กำลังดำเนินการ

เหตุการณ์

ต่อไปนี้เป็นประเภทเหตุการณ์ที่เป็นของวัตถุ DragEvent -

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

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
   .DivDrop {
      float: left;
      width: 100px;
      height: 40px;
      margin:10px;
      border: 1px solid blue;
      background-color:lightgreen;
      font-weight:bold;
   }
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
   document.ondragstart = function(event) {
      event.dataTransfer.setData("Text", "spanDrag");
      document.getElementById("spanDrag").innerText="drag Text";
      document.getElementById("spanDrag").style.backgroundColor="lightgreen";
   };
   document.ondrag = function(event) {
      document.getElementById("Sample").innerHTML = "Span element is being dragged";
   };
   document.ondragover = function(event) {
      event.preventDefault();
   };
   document.ondrop = function(event) {
      event.preventDefault();
      if(event.target.className=="DivDrop"){
         var txt = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(txt));
         document.getElementById(txt).innerText="Dragged Text";
         document.getElementById(txt).style.backgroundColor="lightyellow";
         document.getElementById("Sample").innerHTML = "The span element is dropped";
      }
   };
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM DragEvent

ในการลาก “ลากสิ่งนี้!” Text.It จะเปลี่ยนเป็น “drag Text”

HTML DOM DragEvent

เมื่อวาง "ลากข้อความ" ใน div ที่สอง -

HTML DOM DragEvent

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้างองค์ประกอบ div สองรายการที่มีชื่อคลาสเดียวกันว่า "DivDrop" ซึ่งจะช่วยให้เราใช้รูปแบบ css ทั่วไปสำหรับทั้งสององค์ประกอบ องค์ประกอบ

แรกมีองค์ประกอบ อยู่ภายในซึ่งเราจะลากในภายหลัง -

.DivDrop {
   float: left;
   width: 100px;
   height: 40px;
   margin:10px;
   border: 1px solid blue;
   background-color:lightgreen;
   font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>

เราได้สร้างฟังก์ชันหลายอย่างที่จะดำเนินการเมื่อมีเหตุการณ์เกิดขึ้น ฟังก์ชันแรกเชื่อมโยงกับเหตุการณ์ ondragstart เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้เริ่มลากข้อความ ฟังก์ชันนี้มีเมธอด setData() ที่ใช้ลากประเภทข้อมูลและข้อมูล ประเภทคือ "ข้อความ" และข้อมูลคือรหัสองค์ประกอบ คุณควรใช้ event.target.id เพื่อค้นหา id ที่เชื่อมโยงกับแท็ก

เราใช้ชื่อนี้เพื่อความเรียบง่าย -

document.ondragstart = function(event) {
   event.dataTransfer.setData("Text", "spanDrag");
   document.getElementById("spanDrag").innerText="drag Text";
   document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};

ฟังก์ชันที่เกี่ยวข้องกับเหตุการณ์ ondrag ตั้งค่าข้อความองค์ประกอบ

เป็น "กำลังลากองค์ประกอบช่วง" โดยใช้คุณสมบัติ innerHTML หลังจากได้รับรหัส เหตุการณ์ ondrag เริ่มทำงานเมื่อข้อความถูกลากโดยผู้ใช้ -

Document.ondrag = function(event) {
   document.getElementById("Sample").innerHTML = "Span element is being dragged";
};

ฟังก์ชันที่เกี่ยวข้องกับเหตุการณ์ ondragover ใช้เมธอด event.preventDefault() เพื่อหยุดการดำเนินการเริ่มต้นที่จะเกิดขึ้นกับ Dragover เหตุการณ์ dragover ยิงเป็นระยะเมื่อองค์ประกอบที่ถูกลากอยู่เหนือเป้าหมายที่ตั้งใจไว้ -

document.ondragover = function(event) {
   event.preventDefault();
};

ฟังก์ชันที่เกี่ยวข้องกับเหตุการณ์ ondrop ป้องกันไม่ให้การดำเนินการเริ่มต้นเกิดขึ้น จากนั้นจะตรวจสอบว่าเป้าหมายที่ต้องการเป็นองค์ประกอบ

ที่สองหรือไม่ โดยไม่ต้องตรวจสอบว่าเป็นองค์ประกอบใด สามารถวางข้อความไว้ที่ใดก็ได้บนหน้าเว็บ ซึ่งอาจส่งผลต่อลักษณะที่ปรากฏของหน้าเว็บ

จากนั้นเราจะดึงข้อมูลประเภท "ข้อความ" โดยใช้เมธอด getData() องค์ประกอบนั้นจะเป็น ในกรณีของเรา จากนั้นเราจะผนวกองค์ประกอบ เป็นลูกของ div ที่สอง และเปลี่ยนข้อความภายใน สีพื้นหลังเพื่อสะท้อนการเปลี่ยนแปลง -

document.ondrop = function(event) {
   event.preventDefault();
   if(event.target.className=="DivDrop"){
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText="Dragged Text";
      document.getElementById(txt).style.backgroundColor="lightyellow";
      document.getElementById("Sample").innerHTML = "The span element is dropped";
   }