HTML ondragend इवेंट एट्रिब्यूट

विवरण

HTML ondragend इवेंट एट्रिब्यूट HTML दस्तावेज़ में जब उपयोगकर्ता किसी HTML तत्व के एलिमेंट या टेक्स्ट को ड्रैग करना समाप्त करता है, तब ट्रिगर होता है।

सिंटैक्स

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

उदाहरण

आइए HTML ondragend इवेंट एट्रिब्यूट का एक उदाहरण देखें:

<!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>HTML ondragend इवेंट एट्रिब्यूट डेमो</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 इवेंट एट्रिब्यूट कैसे काम करता है: