ondrag इवेंट
वर्णन और उपयोग
ondrag इवेंट जब एलीमेंट या टेक्स्ट का चयन खींचा जाता है तो होता है
ड्रैग और ड्रॉप एचटीएमएल में बहुत सामान्य फ़ंक्शन है। यह तो अपने एक ऑब्जेक्ट को 'उठाकर' और उसे अलग स्थान पर ले जाने के लिए है। अधिक जानकारी के लिए, हमारे बारे में पढ़ें HTML5 खींचे और छोड़ेंके एचटीएमएल शिक्षण का उपयोग करें।
टिप्पणी：यदि आप एलीमेंट को खींचनेवाले करना चाहते हैं, तो वैश्विक HTML5 draggable गुण।
सूचना:डिफ़ॉल्ट में, लिंक और इमेज़ खींचनेवाले हैं और draggable गुण की आवश्यकता नहीं है。
खींचने और छोड़ने के अलग-अलग चरणों में, कई इवेंटों का उपयोग किया जाता है और हो सकते हैं:
खींचने वाले लक्ष्य (स्रोत एलीमेंट) पर प्रेरित होने वाले इवेंट:
- ondragstart - जब उपयोगकर्ता एलीमेंट को खींचना शुरू करता है तो होता है
- ondrag - जब एलीमेंट खींचा जाता है तो होता है
- ondragend - जब उपयोगकर्ता खींचे गए एलीमेंट को पूरा करने पर होता है
रखने के लिए लक्ष्य पर प्रेरित होने वाले इवेंट:
- ondragenter - जब खींचे गए एलीमेंट को रखने के लिए लक्ष्य में प्रवेश करता है तो होता है
- ondragover - जब खींचे गए एलीमेंट रखने के लिए लक्ष्य पर होता है तो होता है
- ondragleave - जब खींचे गए एलीमेंट को रखने के लिए लक्ष्य से बाहर कर दिया जाता है तो होता है
- ondrop - जब खींचे गए एलीमेंट को रखने के लिए लक्ष्य पर रखा जाता है तो होता है
टिप्पणी：एलीमेंट को खींचते समय, ondrag इवेंट प्रति 350 मिलीसेकंड प्रेरित होता है。
उदाहरण
पैरा <p> एलीमेंट को खींचते समय जेसक्रिप्ट चलाया जाता है:
<p draggable="true" ondrag="myFunction(event)">मुझे खींचें!</p>
पृष्ठ के नीचे अधिक TIY उदाहरण हैं。
व्याकरण
एचटीएमएल में:
<एलीमेंट ondrag="myScript">
जेसक्रिप्ट में:
ऑब्जेक्ट.ondrag = function(){myScript};
जेसक्रिप्ट में addEventListener() विधि का उपयोग करना:
ऑब्जेक्ट.addEventListener("drag", myScript);
टिप्पणी：इंटरनेट एक्सप्लोरर 8 या अधिक पुरानी संस्करण इसका समर्थन नहीं करते addEventListener() विधि।
तकनीकी विवरण
| बुफिंग: | समर्थित |
|---|---|
| रद्द करने योग्य: | समर्थित |
| इवेंट तरीका: | DragEvent |
| समर्थित HTML टैग: | सभी HTML एलेमेंट |
| DOM संस्करण: | स्तर 3 इवेंट |
ब्राउज़र समर्थन
तालिका में इस इवेंट के पूर्ण समर्थन वाले पहले ब्राउज़र का संस्करण उल्लेख किया गया है。
| इवेंट | च्रोम | आईई | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|---|
| ondrag | 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 = "ड्रैगिंग करना शुरू हुआ p एलेमेंट.";
// ड्रैग करने वाले एलेमेंट की अस्पष्टता को बदलें
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 = "ड्रैगिंग करने वाले p एलेमेंट को पूर्ण किया गया.";
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>
