ड्रैग एंड ड्रॉप (DnD) शक्तिशाली यूज़र इंटरफेस कॉन्सेप्ट है जो माउस क्लिक की मदद से आइटम्स को कॉपी, रीऑर्डर और डिलीट करना आसान बनाता है। यह यूज़र को किसी एलिमेंट पर माउस बटन क्लिक करके होल्ड करने, उसे दूसरी लोकेशन पर ड्रैग करने, और माउस बटन छोड़कर एलिमेंट को वहां ड्रॉप करने की अनुमति देता है।
पारंपरिक HTML4 के साथ ड्रैग एंड ड्रॉप कार्यक्षमता प्राप्त करने के लिए, डेवलपर्स को या तो जटिल JavaScript प्रोग्रामिंग या jQuery जैसे अन्य JavaScript फ्रेमवर्क का उपयोग करना पड़ता था।
अब HTML5 एक ड्रैग एंड ड्रॉप (DnD) API के साथ आया है जो ब्राउज़र में नेटिव DnD सपोर्ट लाता है, जिससे कोड करना बहुत आसान हो जाता है।
ड्रैग एंड ड्रॉप कैसे इम्प्लीमेंट करें
ड्रैग एंड ड्रॉप इम्प्लीमेंट करने के लिए, आपको दो-चरणीय प्रक्रिया का पालन करना होगा।
चरण 1 - ऑब्जेक्ट को ड्रैगेबल बनाएं
HTML5 में ड्रैग एंड ड्रॉप इम्प्लीमेंट करने के लिए, पहले आपको ऑब्जेक्ट को ड्रैगेबल बनाने की आवश्यकता है।
यदि आप किसी एलिमेंट को ड्रैग करना चाहते हैं, तो आपको उस एलिमेंट के लिए draggable एट्रिब्यूट को true पर सेट करना होगा। dragstart के लिए एक इवेंट लिसनर सेट करें जो ड्रैग किए जा रहे डेटा को स्टोर करता है। इवेंट लिसनर dragstart अनुमत प्रभाव (कॉपी, मूव, लिंक, या कुछ संयोजन) सेट करेगा।
उदाहरण
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #boxA, #boxB { float:left; padding:10px; margin:10px; -moz-user-select:none; } #boxA { background-color: #50B948; width:75px; height:75px; } #boxB { background-color: #0000FF; width:150px; height:150px; } </style> <script type="text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target, 0, 0); return true; } </script> </head> <body> <center> <h2>Drag and drop in HTML5</h2> <div>Try to drag the green box around.</div> <div id="boxA" draggable="true" ondragstart="return dragStart(ev)"> <p>Drag Me</p> </div> <div id="boxB">Dustbin</div> </center> </body> </html> चरण 2 - ऑब्जेक्ट को ड्रॉप करना
ड्रॉप स्वीकार करने के लिए, ड्रॉप टारगेट को कम से कम तीन इवेंट्स सुनने होंगे।
dragenter इवेंट यह निर्धारित करने के लिए उपयोग किया जाता है कि ड्रॉप टारगेट ड्रॉप स्वीकार करेगा या नहीं। यदि ड्रॉप स्वीकार किया जाना है, तो इस इवेंट को कैंसल करना होगा। dragover इवेंट, जो यह निर्धारित करने के लिए उपयोग किया जाता है कि यूज़र को क्या फीडबैक दिखाया जाए।
उदाहरण
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #boxA, #boxB { float:left; padding:10px; margin:10px; -moz-user-select:none; } #boxA { background-color: #50B948; width:75px; height:75px; } #boxB { background-color: #0000FF; width:150px; height:150px; } </style> <script type="text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target, 0, 0); return true; } function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { return false; } function dragDrop(ev) { var src = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(src)); ev.stopPropagation(); return false; } </script> </head> <body> <center> <h2>Drag and drop in HTML5</h2> <div>Try to move the green box into the blue box.</div> <div id="boxA" draggable="true" ondragstart="return dragStart(ev)"> <p>Drag Me</p> </div> <div id="boxB" ondragenter="return dragEnter(ev)" ondrop="return dragDrop(ev)" ondragover="return dragOver(ev)">Dustbin</div> </center> </body> </html>
