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

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

ไวยากรณ์

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

<tagname ondrop="script"></tagname>

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

ผลลัพธ์

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