HTML DOM DragEvent

HTML DOM DragEvent एक प्रकार का इवेंट है जो तब एक्ज़िक्यूट होता है जब सिलेक्टेड टेक्स्ट को ड्रैग और ड्रॉप किया जाता है। यह इवेंट HTML5 में पेश किया गया था।

गुण (Properties)

HTML DOM DragEvent के लिए निम्नलिखित गुण है:

सिंटैक्स

DragEvent के लिए सिंटैक्स:

Object.DragEventType = function_name;

यहां, function_name वह फंक्शन है जिसे हम इवेंट होने पर एक्ज़िक्यूट करना चाहते हैं।

इवेंट्स (Events)

DragEvent ऑब्जेक्ट से संबंधित निम्नलिखित इवेंट प्रकार हैं:

उदाहरण

<!DOCTYPE html> <html> <head> <style> 
  .DivDrop { 
    float: left; 
    width: 100px; 
    height: 40px; 
    margin:10px; 
    border: 1px solid blue; 
    background-color:lightgreen; 
    font-weight:bold; 
  } 
</style> </head> <body> 
<h2>DragEvent उदाहरण</h2> 
<div class="DivDrop"> 
  <span id="spanDrag" draggable="true">Drag This!</span> 
</div> 
<div class="DivDrop"></div> 
<p id="Sample" style="clear:both"></p> 
<script> 
  document.ondragstart = function(event) { 
    event.dataTransfer.setData("Text", "spanDrag"); 
    document.getElementById("spanDrag").innerText="drag Text"; 
    document.getElementById("spanDrag").style.backgroundColor="lightgreen"; 
  }; 
  document.ondrag = function(event) { 
    document.getElementById("Sample").innerHTML = "Span तत्व ड्रैग किया जा रहा है"; 
  }; 
  document.ondragover = function(event) { 
    event.preventDefault(); 
  }; 
  document.ondrop = function(event) { 
    event.preventDefault(); 
    if(event.target.className=="DivDrop"){ 
      var txt = event.dataTransfer.getData("Text"); 
      event.target.appendChild(document.getElementById(txt)); 
      document.getElementById(txt).innerText="Dragged Text"; 
      document.getElementById(txt).style.backgroundColor="lightyellow"; 
      document.getElementById("Sample").innerHTML = "Span तत्व ड्रॉप हो गया है"; 
    } 
  }; 
</script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

"Drag This!" टेक्स्ट को ड्रैग करने पर यह "drag Text" में बदल जाएगा।

दूसरे div में "drag Text" को ड्रॉप करने पर:

उदाहरण की व्याख्या

उपरोक्त उदाहरण में:

• हमने पहले दो div तत्व बनाए जिनका समान class name "DivDrop" है, जिससे हम दोनों के लिए एक सामान्य CSS स्टाइल उपयोग कर सकते हैं। पहला <div> तत्व उसके अंदर एक <span> तत्व रखता है जिसे हम बाद में ड्रैग करेंगे:

.DivDrop { 
  float: left; 
  width: 100px; 
  height: 40px; 
  margin:10px; 
  border: 1px solid blue; 
  background-color:lightgreen; 
  font-weight:bold; 
} 
<div class="DivDrop"> 
  <span id="spanDrag" draggable="true">Drag This!</span> 
</div> 
<div class="DivDrop"></div>

• फिर हमने कई फंक्शन बनाए जो इवेंट होने पर एक्ज़िक्यूट होंगे। पहला फंक्शन ondragstart इवेंट से जुड़ा है। यह इवेंट तब फायर होता है जब यूज़र टेक्स्ट को ड्रैग करना शुरू करता है। फंक्शन में setData() मेथड होता है जो ड्रैग डेटा टाइप और डेटा लेता है। यहां टाइप "text" है और डेटा <span> तत्व का id है। आपको <p> टैग से जुड़े id को खोजने के लिए event.target.id का उपयोग करना चाहिए। हमने यहां सरलता के लिए नाम का उपयोग किया है:

document.ondragstart = function(event) { 
  event.dataTransfer.setData("Text", "spanDrag"); 
  document.getElementById("spanDrag").innerText="drag Text"; 
  document.getElementById("spanDrag").style.backgroundColor="lightgreen"; 
};

• ondrag इवेंट से जुड़ा फंक्शन <p> तत्व के टेक्स्ट को "Span तत्व ड्रैग किया जा रहा है" पर सेट करता है, इसके innerHTML प्रॉपर्टी का उपयोग करके इसके id को प्राप्त करने के बाद। ondrag इवेंट तब फायर होता है जब टेक्स्ट को यूज़र द्वारा ड्रैग किया जा रहा हो:

document.ondrag = function(event) { 
  document.getElementById("Sample").innerHTML = "Span तत्व ड्रैग किया जा रहा है"; 
};

• ondragover इवेंट से जुड़ा फंक्शन event.preventDefault() मेथड का उपयोग करके ड्रैगओवर पर होने वाले डिफ़ॉल्ट एक्शन को रोकता है। dragover इवेंट समय-समय पर फायर होता है जब ड्रैग किया जा रहा तत्व इच्छित टारगेट के ऊपर होता है:

document.ondragover = function(event) { 
  event.preventDefault(); 
};

• ondrop इवेंट से जुड़ा फंक्शन डिफ़ॉल्ट एक्शन को होने से रोकता है। फिर यह चेक करता है कि इच्छित टारगेट दूसरा <div> तत्व है या नहीं। बिना चेक किए कि यह कौन सा तत्व है, यह टेक्स्ट को पेज पर कहीं भी रख सकता है जो वेब पेज की उपस्थिति को प्रभावित कर सकता है।
• फिर हम getData() मेथड का उपयोग करके "text" टाइप के लिए ड्रैग डेटा प्राप्त करते हैं। हमारे मामले में वह तत्व <span> होगा और फिर हम <span> तत्व को दूसरे div के चाइल्ड के रूप में जोड़ते हैं और इसके इनर टेक्स्ट, बैकग्राउंड कलर को बदलकर परिवर्तनों को प्रतिबिंबित करते हैं:

document.ondrop = function(event) { 
  event.preventDefault(); 
  if(event.target.className=="DivDrop"){ 
    var txt = event.dataTransfer.getData("Text"); 
    event.target.appendChild(document.getElementById(txt)); 
    document.getElementById(txt).innerText="Dragged Text"; 
    document.getElementById(txt).style.backgroundColor="lightyellow"; 
    document.getElementById("Sample").innerHTML = "Span तत्व ड्रॉप हो गया है"; 
  } 
};