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

ondrag एट्रिब्यूट (न कि ondragover) तब ट्रिगर होता है जब एलिमेंट खींचा जा रहा होता है (ड्रैग ऑपरेशन के दौरान हर कुछ सौ मिलीसेकंड में फायर होता है)। 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>

ड्रैग इवेंट क्रम: dragstart → drag (बार-बार) → dragend (स्रोत पर)। टार्गेट पर: dragenter → dragover (बार-बार) → drop या dragleave।