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

แอตทริบิวต์เหตุการณ์ ondragend ของ HTML จะถูกกระตุ้นเมื่อผู้ใช้ลากองค์ประกอบหรือข้อความขององค์ประกอบ HTML เสร็จสิ้นในเอกสาร HTML

ไวยากรณ์

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

<tagname ondragend="script"></tagname>

ลองดูตัวอย่างการใช้งานแอตทริบิวต์เหตุการณ์ ondragend ของ 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>การสาธิตแอตทริบิวต์เหตุการณ์ ondragend ของ HTML</h1> <div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" ondragend="dragFinished(event)" draggable="true" class="circle"></p> </div> <div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p>ลองลากและวางวงกลมสีแดง</p> <div class="show"></div> <script>    function dragStart(event) {       event.dataTransfer.setData("Text", event.target.id);       document.querySelector(".show").innerHTML = "เริ่มลากวงกลมสีแดงแล้ว";    }    function dragFinished(event) {       document.querySelector(".show").innerHTML = "ลากวงกลมสีแดงเสร็จแล้ว";    }    function allowDrop(event) {       event.preventDefault();    }    function drop(event) {       event.preventDefault();       event.target.appendChild(document.querySelector('.circle'));    } </script> </body> </html>

ผลลัพธ์

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