HTML ondragenter इवेंट एट्रिब्यूट

विवरण

HTML ondragenter इवेंट एट्रिब्यूट HTML दस्तावेज़ में जब कोई ड्रैगेबल तत्व या टेक्स्ट एक वैध ड्रॉप टारगेट में प्रवेश करता है, तब ट्रिगर होता है।

सिंटैक्स

<tagname ondragenter="script"></tagname>

उदाहरण

आइए HTML ondragenter इवेंट एट्रिब्यूट का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
  body { 
    color: #000; 
    height: 100vh; 
    background-color: #FBAB7E; 
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); 
    text-align: center; 
  } 
  .drop-target { 
    display: inline-block; 
    width: 150px; 
    height: 150px; 
    border: 2px solid #FFF; 
    margin: 1rem; 
    vertical-align: middle; 
    padding: 20px; 
  } 
  .circle { 
    background: #db133a; 
    height: 40px; 
    width: 40px; 
    border-radius: 50%; 
  } 
  .show { 
    color: #fff; 
    font-size: 1.2rem; 
  } 
</style> </head> <body> 
<h1>HTML ondragenter इवेंट एट्रिब्यूट डेमो</h1> 
<div class="drop-target" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)"> 
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget" class='circle'></p> 
</div> 
<div class="drop-target" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<p>अब लाल सर्कल को ड्रैग और ड्रॉप करने का प्रयास करें</p> 
<div class="show"></div> 
<script> 
  function dragStart(event) { 
    event.dataTransfer.setData("Text", event.target.id); 
  } 
  function dragEnter(event) { 
    if (event.target.className == "drop-target") { 
      event.target.style.background = "#db133a3d"; 
      document.querySelector(".show").innerHTML = "ड्रॉपज़ोन में प्रवेश किया"; 
    } 
  } 
  function dragLeave(event) { 
    if (event.target.className == "drop-target") { 
      event.target.style.background = "transparent"; 
      document.querySelector(".show").innerHTML = "ड्रॉपज़ोन से बाहर निकला"; 
    } 
  } 
  function allowDrop(event) { 
    event.preventDefault(); 
  } 
  function drop(event) { 
    event.preventDefault(); 
    var data = event.dataTransfer.getData("Text"); 
    event.target.appendChild(document.querySelector('.circle')); 
  } 
</script> </body> </html>

आउटपुट

अब दो बॉक्स के बीच लाल सर्कल को ड्रैग और ड्रॉप करने का प्रयास करें और देखें कि ondragenter इवेंट एट्रिब्यूट कैसे काम करता है: