แอตทริบิวต์เหตุการณ์ ondragleave ของ HTML

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

ไวยากรณ์

ไวยากรณ์มีดังนี้ −

<tagname ondragleave="script"></tagname>

ลองดูตัวอย่างการใช้งานแอตทริบิวต์เหตุการณ์ ondragleave ของ HTML −

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;    }    .drop-target {       display: inline-block;       width: 150px;       height: 150px;       border: 2px solid #FFF;       margin: 1rem;       vertical-align: middle;       padding: 20px;    }    .circle {       background: #db133a;       height: 40px;       width: 40px;       border-radius: 50%;    }    .show {       color: #fff;       font-size: 1.2rem;    } </style> </head> <body> <h1>การสาธิตแอตทริบิวต์เหตุการณ์ ondragleave ของ HTML</h1> <div class="drop-target" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget" class='circle'></p> </div> <div class="drop-target" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p>ลองลากและวางวงกลมสีแดง</p> <div class="show"></div> <script>    function dragStart(event) {       event.dataTransfer.setData("Text", event.target.id);    }    function dragEnter(event) {       if (event.target.className == "drop-target") {          event.target.style.background = "#db133a3d";          document.querySelector(".show").innerHTML = "เข้าสู่พื้นที่วาง";       }    }    function dragLeave(event) {       if (event.target.className == "drop-target") {          event.target.style.background = "transparent";          document.querySelector(".show").innerHTML = "ออกจากพื้นที่วาง";       }    }    function allowDrop(event) {       event.preventDefault();    }    function drop(event) {       event.preventDefault();       var data = event.dataTransfer.getData("Text");       event.target.appendChild(document.querySelector('.circle'));    } </script> </body> </html>

ผลลัพธ์

ลองลากและวางวงกลมสีแดงระหว่างกล่องสองกล่องเพื่อสังเกตการทำงานของแอตทริบิวต์เหตุการณ์ ondragleave −