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

जब किसी एलिमेंट को वैलिड ड्रॉप टार्गेट पर खींचा जाता है, तो ondragover एट्रिब्यूट फायर होता है। ड्रॉप अनुमति देने के लिए event.preventDefault() कॉल करना आवश्यक है (डिफ़ॉल्ट रूप से ड्रॉप अक्षम होता है)।

उदाहरण

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

<!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>