ondragend इवेंट

विभावना और उपयोग

जब उपयोगकर्ता एलीमेंट या टेक्स्ट सेलेक्शन को खींचने का कार्य पूरा करता है तो ondragend घटना होती है。

HTML5 ड्रैग करने और ड्रॉप करने की सुविधा बहुत आम है। यह उस तरह की सुविधा है जब आप एक ऑब्जेक्ट को "उठाकर" उसे अलग स्थान पर ले जाते हैं। अधिक जानकारी के लिए हमारे बारे में पढ़ें HTML5 खींचे और छोड़ेंका एचटीएमएल शिक्षा उपयोग करें

टिप्पणी:यदि आप एलीमेंट को ड्रैग करने योग्य बनाना चाहते हैं तो वैश्विक HTML5 draggable गुण

सूचना:मूलभूत रूप से, लिंक और इमेजेज ड्रैग करने योग्य हैं और draggable गुण की आवश्यकता नहीं है

ड्रैग एंड ड्रॉप ऑपरेशन के विभिन्न चरणों में, कई घटनाएँ उपयोग में ली जाती हैं और हो सकती हैं:

ड्रैग करने योग्य लक्ष्य (स्रोत एलीमेंट) पर ट्रिगर की जाने वाली घटनाएँ:

  • ondragstart - जब उपयोगकर्ता एलीमेंट को खींचने का कार्य शुरू करता है तो घटना होती है
  • ondrag - जब एलीमेंट को खींचा जाता है तो घटना होती है
  • ondragend - जब उपयोगकर्ता एलीमेंट को खींचने का कार्य पूरा करता है तो घटना होती है

डिस्पोज के लक्ष्य पर ट्रिगर की जाने वाली घटनाएँ:

  • ondragenter - जब खींचे गए एलीमेंट डिस्पोज के लक्ष्य में प्रवेश करता है तो घटना होती है
  • ondragover - जब खींचे गए एलीमेंट डिस्पोज के लक्ष्य पर होता है तो घटना होती है
  • ondragleave - जब खींचे गए एलीमेंट डिस्पोज के लक्ष्य से बाहर निकलता है तो घटना होती है
  • ondrop - जब खींचे गए एलीमेंट को डिस्पोज़ के लक्ष्य पर रखा जाता है तो घटना होती है

उदाहरण

जब उपयोगकर्ता <p> एलीमेंट को खींचने का कार्य पूरा करता है तो जावास्क्रिप्ट चलाया जाता है:

<p draggable="true" ondragend="myFunction(event)">मुझे खींचें!</p>

आप खुद सामने पर प्रयास करें

पृष्ठ के नीचे अधिक TIY उदाहरण हैं。

व्याकरण

एचटीएमएल में:

<एलीमेंट ondragend="myScript">

आप खुद सामने पर प्रयास करें

जावास्क्रिप्ट में:

ऑब्जेक्ट.ondragend = function(){myScript};

आप खुद सामने पर प्रयास करें

जावास्क्रिप्ट में,addEventListener() विधि का उपयोग करके:

ऑब्जेक्ट.addEventListener("dragend", myScript);

आप खुद सामने पर प्रयास करें

टिप्पणी:इंटरनेट एक्सप्लोरर 8 या अधिक पुरानी संस्करण इसका समर्थन नहीं करते addEventListener() विधि

तकनीकी विवरण

बुबलिंग: समर्थित
रद्द करने योग्य: नसमर्थित
इवेंट तरीका: DragEvent
समर्थित HTML टैग: सभी HTML एलिमेंट
DOM संस्करण: स्तर 3 इवेंट

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस इवेंट के पूर्ण समर्थन वाले पहले ब्राउज़र संस्करण को सूचित करते हैं。

इवेंट च्रोम आईई फायरफॉक्स सैफारी ओपेरा
ondragend 4.0 9.0 3.5 6.0 12.0

और इससे भी अधिक उदाहरण

सभी संभावित ड्रैग ड्रॉप इवेंटों के लिए प्रदर्शन:

<p draggable="true" id="dragtarget">मुझे ड्रैग करें!</p>
<div class="droptarget">यहाँ ड्रॉप करें!</div>
<script>
/* ----------------- ड्रैग लक्ष्य पर ट्रिगर होने वाले इवेंट ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() तरीका से ड्रैग किए गए डाटा का डाटा प्रकार और मूल्य सेट करें
  event.dataTransfer.setData("Text", event.target.id);
  // ड्रैगिंग प एलिमेंट को शुरू करने के दौरान टेक्स्ट आउटपुट दें
  document.getElementById("demo").innerHTML = "ड्रैगिंग प एलिमेंट को शुरू किया गया है.";
  // ड्रैगिंग एलिमेंट की अस्पष्टता बदलें
  event.target.style.opacity = "0.4";
});
// ड्रैगिंग प एलिमेंट के दौरान आउटपुट टेक्स्ट का रंग बदलें
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// ड्रैगिंग प एलिमेंट को पूरा करने के बाद टेक्स्ट आउटपुट दें और अस्पष्टता रीसेट करें
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "फिनिश हो गया ड्रैगिंग प एलिमेंट.";
  event.target.style.opacity = "1";
});
/* ----------------- जगह देने के लिए टैरगेट पर ट्रिगर की गई इवेंट ----------------- */
// ड्रैग करने वाले p एलीमेंट जब droptarget में प्रवेश करता है तो DIV के बॉर्डर शैली को बदलें
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// डिफ़ॉल्ट में, डाटा/एलीमेंट को अन्य एलीमेंट में जगह देने नहीं सकता। जगह देने की अनुमति देने के लिए हमें एलीमेंट के डिफ़ॉल्ट व्यवहार को रोकना होगा
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ड्रैग करने वाले p एलीमेंट जब droptarget से बाहर निकलता है तो DIV के बॉर्डर शैली को पुन:सेट करें
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - ब्राउज़र के डाटा के मूलभूत व्यवहार को रोकें (ड्रॉप करने पर लिंक के रूप में खोला जाएगा)
आउटपुट टेक्स्ट और DIV के बॉर्डर रंग को पुन:सेट करें
dataTransfer.getData() विधि का उपयोग करके खींचे गए डाटा प्राप्त करें
खींचे गए डाटा खींचे गए एलीमेंट के id (")drag1") है
खींचे गए एलीमेंट को जगह देने वाले एलीमेंट में जोड़ दिया जाएगा
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

आप खुद सामने पर प्रयास करें

संबंधित पृष्ठ

HTML शिक्षा: HTML5 खींचे और छोड़े

HTML संदर्भ मानचित्र: HTML draggable गुण