एचटीएमएल डोम ड्रैगइवेंट

। डिवड्रॉप {फ्लोट:बाएं; चौड़ाई:100 पीएक्स; ऊंचाई:40 पीएक्स; मार्जिन:10 पीएक्स; सीमा:1px ठोस नीला; पृष्ठभूमि-रंग:हल्का हरा; font-weight:bold;}
इसे ड्रैग करें!


 

 हमने तब कई फ़ंक्शन बनाए हैं जो किसी घटना के होने पर निष्पादित होंगे। पहला फ़ंक्शन ऑनड्रैगस्टार्ट इवेंट से जुड़ा है। यह घटना तब सक्रिय होती है जब उपयोगकर्ता पाठ को खींचना शुरू करता है। फ़ंक्शन में सेटडेटा () विधि होती है जो डेटा प्रकार और डेटा को खींचती है। यहां टाइप "टेक्स्ट" है और डेटा  एलिमेंट आईडी है। 

 टैग से संबंधित आईडी खोजने के लिए आपको event.target.id का उपयोग करना चाहिए। हमने यहां सादगी के लिए नाम का इस्तेमाल किया -
 
document.ondragstart =function(event) {event.dataTransfer.setData("Text", "spanDrag"); document.getElementById("spanDrag").innerText="ड्रैग टेक्स्ट"; document.getElementById("spanDrag").style.backgroundColor="lightgreen";};
 

 ondrag ईवेंट से संबद्ध फ़ंक्शन 

 एलिमेंट टेक्स्ट को उसकी आईडी प्राप्त करने के बाद उसकी आंतरिक HTML प्रॉपर्टी का उपयोग करके "स्पैन एलिमेंट को ड्रैग किया जा रहा है" पर सेट करता है। ऑनड्रैग इवेंट तब सक्रिय होता है जब उपयोगकर्ता द्वारा टेक्स्ट को खींचा जा रहा होता है -
 
Document.ondrag =function(event) { document.getElementById("Sample").innerHTML ="स्पैन एलिमेंट को खींचा जा रहा है";};
 

 ड्रैगओवर पर होने वाली डिफ़ॉल्ट क्रिया को रोकने के लिए ऑनड्रैगओवर इवेंट से जुड़ा फ़ंक्शन इवेंट। प्रिवेंटडिफॉल्ट () विधि का उपयोग करता है। ड्रैगओवर इवेंट समय-समय पर सक्रिय होता है जब ड्रैग किया जा रहा तत्व इच्छित लक्ष्य से ऊपर होता है -
 
document.ondraover =function(event) {event.preventDefault();};
 

 ऑनड्रॉप ईवेंट से संबद्ध फ़ंक्शन डिफ़ॉल्ट क्रिया को होने से रोकता है। यह तब जांचता है कि इच्छित लक्ष्य दूसरा 
 तत्व है या नहीं। यह जाँचे बिना कि यह कौन सा तत्व है, यह टेक्स्ट को पेज पर कहीं भी रख सकता है जो वेब पेज की उपस्थिति को प्रभावित कर सकता है।
 

 फिर हम getData () विधि का उपयोग करके "टेक्स्ट" प्रकार के लिए ड्रैग डेटा प्राप्त करते हैं। वह तत्व हमारे मामले में  होगा और फिर हम  तत्व को दूसरे div के बच्चे के रूप में जोड़ते हैं और परिवर्तनों को प्रतिबिंबित करने के लिए इसके आंतरिक पाठ, पृष्ठभूमि रंग को बदलते हैं -
 <पूर्व>दस्तावेज़.ऑनड्रॉप =फ़ंक्शन (ईवेंट) {event.preventDefault (); अगर (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 ="लाइटयेलो"; document.getElementById("Sample").innerHTML ="अवधि तत्व गिरा दिया गया है"; }