HTML में ड्रैग किया गया एलिमेंट ड्रॉप होने पर स्क्रिप्ट कैसे चलाएं?

ondrop एट्रिब्यूट तब ट्रिगर होता है जब ड्रैग किया गया एलिमेंट वैलिड ड्रॉप टार्गेट पर ड्रॉप होता है। ड्रॉप होने के लिए टार्गेट पर ondragover में event.preventDefault() कॉल करना आवश्यक है।

उदाहरण

निम्न कोड से ondrop एट्रिब्यूट लागू करें:

<!DOCTYPE HTML> <html> 
  <head> 
    <style> 
      .drag { 
        float: left; 
        width: 100px; 
        height: 35px; 
        border: 2px dashed #876587; 
        margin: 15px; 
        padding: 10px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"> 
      <p ondragstart="dragStart(event)" ondrag="draggingNow(event)" draggable="true" id="dragtarget">ड्रैग करें!</p> 
    </div> 
    <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div> 
    <div id="box"></div> 
    <p>बाएं बॉक्स को दाएं खींचें या दाएं बॉक्स को बाएं।</p> 
    <script> 
      function dragStart(event) { 
        event.dataTransfer.setData("Text", event.target.id); 
      } 
      function draggingNow(event) { 
        document.getElementById("box").innerHTML = "सफलतापूर्वक खींचा गया!"; 
      } 
      function dropNow(event) { 
        event.preventDefault(); 
      } 
      function drop(event) { 
        event.preventDefault(); 
        var data = event.dataTransfer.getData("Text"); 
        event.target.appendChild(document.getElementById(data)); 
        document.getElementById("box").innerHTML = "एलिमेंट सफलतापूर्वक ड्रॉप हुआ!"; 
      } 
    </script> 
  </body> 
</html>