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

विवरण

HTML ondrag इवेंट एट्रिब्यूट HTML दस्तावेज़ में जब उपयोगकर्ता किसी HTML तत्व को ड्रैग करता है, तब ट्रिगर होता है। HTML इमेज और लिंक तत्व डिफ़ॉल्ट रूप से ड्रैगेबल होते हैं इसलिए उन पर ondrag एट्रिब्यूट निर्दिष्ट करने की आवश्यकता नहीं होती।

सिंटैक्स

<tagname ondrag="script"></tagname>

उदाहरण

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

<!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 ondrag इवेंट एट्रिब्यूट डेमो</h1> 
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="circle"></p> 
</div> 
<div class="drop-target" 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 dragging(event) { 
    document.querySelector(".show").innerHTML = "सर्कल ड्रैग किया जा रहा है"; 
  } 
  function allowDrop(event) { 
    event.preventDefault(); 
  } 
  function drop(event) { 
    event.preventDefault(); 
    event.target.appendChild(document.querySelector('.circle')); 
    document.querySelector(".show").innerHTML = "सर्कल ड्रॉप किया गया"; 
  } 
</script> </body> </html>

आउटपुट

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