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

ondragstart एट्रिब्यूट तब ट्रिगर होता है जब उपयोगकर्ता किसी ड्रैगेबल एलिमेंट (draggable="true") को खींचना शुरू करता है। यहां dataTransfer.setData() से डेटा सेट किया जाता है।

उदाहरण

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

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