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

जब कोई एलिमेंट HTML में वैलिड ड्रॉप टार्गेट पर खींचकर पहुंचाया जाता है, तो ondragenter एट्रिब्यूट फायर होता है। यह ड्रॉप टार्गेट पर विजुअल फीडबैक (हाइलाइट, बॉर्डर बदलाव) देने के लिए उपयोगी है।

उदाहरण

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

<!DOCTYPE HTML> <html> 
  <head> 
    <style type="text/css"> 
      #boxA, #boxB { 
        float:left; padding:10px; margin:10px; -moz-user-select:none; 
      } 
      #boxA { background-color: #6633FF; width:75px; height:75px; } 
      #boxB { background-color: #FF6699; width:150px; height:150px; } 
    </style> 
    <script type="text/javascript"> 
      function dragStart(ev) { 
        ev.dataTransfer.effectAllowed = 'move'; 
        ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); 
        ev.dataTransfer.setDragImage(ev.target,0,0); 
        return true; 
      } 
    </script> 
  </head> 
  <body> 
    <center> 
      <h2>ड्रैग और ड्रॉप HTML5 डेमो</h2> 
      <div>बैंगनी बॉक्स को इधर-उधर खींचने का प्रयास करें।</div> 
      <div id="boxA" draggable="true" ondragstart="return dragStart(ev)"> 
        <p>मुझे खींचें</p> 
      </div> 
      <div id="boxB">डस्टबिन</div> 
    </center> 
  </body> 
</html>

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