ondragleave इवेंट
विभावना और उपयोग
जब ड्रैग करने योग्य एलीमेंट या टेक्स्ट चयन वैध ड्रैग करने वाले लक्ष्य से बाहर निकलता है तो ondragleave घटना होती है。
ondragenter और ondragleave घटनाएँ उपयोगकर्ता को यह समझाने में मदद करती हैं कि किसी ड्रैग करने योग्य एलीमेंट को ड्रैग करने वाले लक्ष्य में प्रवेश करना या उससे बाहर निकलना हो रहा है। उदाहरण के लिए, ड्रैग करने वाले एलीमेंट को ड्रैग करने वाले लक्ष्य में प्रवेश करने पर पृष्ठभूमि रंग सेट करके और एलीमेंट को लक्ष्य से बाहर निकलने पर रंग निकालकर इसे पूरा किया जा सकता है。
HTML5 ड्रैग ड्रॉप है एक बहुत प्रचलित फ़ीचर. यह इस तरह है कि आप एक ऑब्जैक्ट को "उठाते हैं" और उसे अलग स्थान पर ले जाते हैं। अधिक जानकारी के लिए, हमारे बारे में HTML5 खींचना और छोड़नाके HTML शिक्षा से इस्तेमाल करें
टिप्पणी：यदि आप एलीमेंट को ड्रैग करने योग्य बनाना चाहते हैं तो वैश्विक HTML5 draggable गुण।
सुझाव:डिफ़ॉल्ट में, लिंक और इमेजेज़ ड्रैग करने योग्य होते हैं और draggable गुण की आवश्यकता नहीं होती
ड्रैग ड्रॉप ऑपरेशन के विभिन्न चरणों में, कई घटनाएँ उपयोग में ली जाती हैं और हो सकती हैं:
ड्रैग करने योग्य लक्ष्य (स्रोत एलीमेंट) पर ट्रिगर की जाने वाली घटनाएँ:
- ondragstart - जब उपयोगकर्ता ड्रैग करने को शुरू करता है तो घटना होती है
- ondrag - जब एलीमेंट ड्रैग किया जाता है तो घटना होती है
- ondragend - जब उपयोगकर्ता ड्रैग किया गया एलीमेंट ड्रैग करने को समाप्त करता है तो घटना होती है
ड्रैग करने वाले लक्ष्य पर ट्रिगर की जाने वाली घटनाएँ:
- ondragenter - जब ड्रैग किया गया एलीमेंट ड्रैग करने वाले लक्ष्य में प्रवेश करता है तो घटना होती है
- ondragover - जब ड्रैग किया गया एलीमेंट ड्रैग करने वाले लक्ष्य पर होता है तो घटना होती है
- ondragleave - जब ड्रैग किया गया एलीमेंट ड्रैग करने वाले लक्ष्य से बाहर निकलता है तो घटना होती है
- ondrop - जब ड्रैग किया गया एलीमेंट ड्रैग करने वाले लक्ष्य पर रखा जाता है तो घटना होती है
उदाहरण
जब ड्रैग करने वाला एलीमेंट ड्रैग करने वाले लक्ष्य से बाहर जाता है तो जावास्क्रिप्ट चलाया जाता है:
<div ondragleave="myFunction(event)"></div>
पृष्ठ के नीचे अधिक TIY उदाहरण हैं。
व्याकरण
HTML में:
<एलीमेंट ondragleave="myScript">
जावास्क्रिप्ट में:
ऑब्जैक्ट.ondragleave = function(){myScript};
जावास्क्रिप्ट में，addEventListener() विधि का उपयोग करके:
ऑब्जैक्ट.addEventListener("dragleave", myScript);
टिप्पणी：इंटरनेट एक्सप्लोरर 8 या अधिक पुरानी संस्करण इसका समर्थन नहीं करते addEventListener() विधि।
तकनीकी विवरण
| बुबलिंग: | समर्थित |
|---|---|
| रद्द करने वाला: | नहीं समर्थित |
| इवेंट तरीका: | DragEvent |
| समर्थित HTML टैग: | सभी HTML एलिमेंट |
| DOM संस्करण: | स्तर 3 इवेंट |
ब्राउज़र समर्थन
तालिका में दिए गए नंबरों में इस इवेंट को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण निर्दिष्ट किया गया है。
| इवेंट | च्रोम | आईई | फायरफॉक्स | सैफारी | ऑपेरा |
|---|---|---|---|---|---|
| ondragleave | 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);
// p एलिमेंट को ड्रैग करना शुरू हुआ जबकि कुछ टेक्स्ट आउटपुट करें
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// ड्रैग करनेवाले एलिमेंट की अवयवगति को बदलें
event.target.style.opacity = "0.4";
});
// ड्रैग करते समय p एलिमेंट के रंग को बदलें
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// ड्रैग करने के बाद p एलिमेंट को अधिकारित करने के लिए कुछ टेक्स्ट आउटपुट करें और अवयवगति को पुन:सेट करें
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
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>
