ड्रैग एंड ड्रॉप (DnD) शक्तिशाली यूजर इंटरफेस अवधारणा है जो माउस क्लिक की मदद से आइटम को कॉपी करना, फिर से व्यवस्थित करना और हटाना आसान बनाता है। यह उपयोगकर्ता को किसी तत्व के ऊपर माउस बटन को दबाकर रखने, उसे किसी अन्य स्थान पर खींचने और उस तत्व को छोड़ने के लिए माउस बटन को छोड़ने की अनुमति देता है।
पारंपरिक HTML4 के साथ ड्रैग एंड ड्रॉप कार्यक्षमता प्राप्त करने के लिए, डेवलपर्स को या तो जटिल Javascript प्रोग्रामिंग या अन्य Javascript फ्रेमवर्क जैसे jQuery आदि का उपयोग करना होगा।
अब HTML 5 ड्रैग एंड ड्रॉप (DnD) API के साथ आया है जो ब्राउज़र में देशी DnD सपोर्ट लाता है जिससे कोड अप करना बहुत आसान हो जाता है।
ड्रैग एंड ड्रॉप कैसे कार्यान्वित करें
ड्रैग एंड ड्रॉप को लागू करने के लिए, आपको दो चरणों वाली प्रक्रिया का पालन करना होगा।
चरण1 − किसी वस्तु को खींचने योग्य बनाएं
HTML5 में ड्रैग एंड ड्रॉप को लागू करने के लिए, सबसे पहले, आपको ऑब्जेक्ट को ड्रैग करने योग्य बनाना होगा,
यदि आप किसी तत्व को खींचना चाहते हैं, तो आपको उस तत्व के लिए ड्रैग करने योग्य विशेषता को सही पर सेट करना होगा। ड्रैगस्टार्ट के लिए एक ईवेंट श्रोता सेट करें जो ड्रैग किए जा रहे डेटा को संग्रहीत करता है। ईवेंट श्रोता ड्रैगस्टार्ट अनुमत प्रभाव (कॉपी, मूव, लिंक, या कुछ संयोजन) सेट करेगा।
उदाहरण
HTML5 में खींचें और छोड़ें
हरे बॉक्स को चारों ओर खींचने की कोशिश करें।मुझे खींचें
Dustbinचरण2 - वस्तु को गिराना
एक बूंद को स्वीकार करने के लिए, ड्रॉप लक्ष्य को कम से कम तीन घटनाओं को सुनना होगा।
ड्रैगेंटर ईवेंट का उपयोग यह निर्धारित करने के लिए किया जाता है कि ड्रॉप लक्ष्य ड्रॉप को स्वीकार करना है या नहीं। यदि ड्रॉप स्वीकार करना है, तो इस घटना को रद्द करना होगा। ड्रैगओवर इवेंट, जिसका उपयोग यह निर्धारित करने के लिए किया जाता है कि उपयोगकर्ता को कौन सा फीडबैक दिखाया जाना है।
यहां बताया गया है कि आप एक बार दूसरे पर आपत्ति कैसे छोड़ सकते हैं
उदाहरण
HTML5 में खींचें और छोड़ें
हरे बॉक्स को नीले बॉक्स में ले जाने का प्रयास करें।मुझे खींचें
Dustbin
