एचटीएमएल 5 - ड्रैग एंड ड्रॉप

ड्रैग एंड ड्रॉप (डीएनडी) शक्तिशाली यूजर इंटरफेस अवधारणा है जो माउस क्लिक की मदद से वस्तुओं की प्रतिलिपि बनाना, पुन: व्यवस्थित करना और हटाना आसान बनाता है। यह उपयोगकर्ता को किसी तत्व पर माउस बटन को क्लिक करने और होल्ड करने की अनुमति देता है, इसे किसी अन्य स्थान पर खींचें और तत्व को छोड़ने के लिए माउस बटन को छोड़ दें।

पारंपरिक एचटीएमएल 4 के साथ ड्रैग एंड ड्रॉप फंक्शनलिटी हासिल करने के लिए, डेवलपर्स को या तो जटिल जावास्क्रिप्ट प्रोग्रामिंग या अन्य जावास्क्रिप्ट चौखटे जैसे जेबी आदि का उपयोग करना होगा।

अब एचटीएमएल 5 एक ड्रैग एंड ड्रॉप (डीएनडी) एपीआई के साथ आया है जो ब्राउज़र में देशी डीएनडी समर्थन लाता है जिससे इसे कोड करना बहुत आसान हो जाता है।

HTML 5 DnD को सभी प्रमुख ब्राउज़रों जैसे क्रोम, फ़ायरफ़ॉक्स 3.5 और सफारी 4 आदि द्वारा समर्थित किया गया है।

ड्रैग एंड ड्रॉप इवेंट्स

ऐसे कई ईवेंट हैं, जिन्हें ड्रैग एंड ड्रॉप ऑपरेशन के विभिन्न चरणों के दौरान निकाल दिया जाता है। इन घटनाओं को नीचे सूचीबद्ध किया गया है -

अनु क्रमांक।	घटनाक्रम और विवरण
1	dragstart जब उपयोगकर्ता ऑब्जेक्ट को खींचना शुरू करता है तो आग लग जाती है।
2	dragenter जब ड्रैग हो रहा हो तब माउस को पहली बार लक्ष्य तत्व पर ले जाया जाता है। इस घटना के लिए एक श्रोता को इंगित करना चाहिए कि क्या इस स्थान पर एक बूंद की अनुमति है। यदि कोई श्रोता नहीं हैं, या श्रोता कोई कार्य नहीं करते हैं, तो डिफ़ॉल्ट रूप से एक बूंद की अनुमति नहीं है।
3	dragover इस घटना को निकाल दिया जाता है क्योंकि जब कोई ड्रैग हो रहा होता है तो माउस को एक तत्व पर ले जाया जाता है। ज्यादातर समय, एक श्रोता के दौरान होने वाला ऑपरेशन ड्रैगेंटर घटना के समान होगा।
4	dragleave इस घटना को निकाल दिया जाता है जब माउस एक तत्व छोड़ता है जबकि एक ड्रैग हो रहा है। श्रोताओं को ड्रॉप फीडबैक के लिए उपयोग किए जाने वाले किसी भी हाइलाइटिंग या सम्मिलन मार्कर को हटा देना चाहिए।
5	drag हर बार माउस ले जाया जाता है, जबकि ऑब्जेक्ट को खींचा जा रहा है।
6	drop ड्रॉप इवेंट को उस तत्व पर निकाल दिया जाता है जहां ड्रैग ऑपरेशन के अंत में ड्रॉप हुआ था। एक श्रोता को ड्रॉप स्थान पर डेटा को खींचने और उसे सम्मिलित करने के लिए जिम्मेदार होगा।
7	dragend जब उपयोगकर्ता किसी ऑब्जेक्ट को खींचते समय माउस बटन छोड़ता है तो आग लग जाती है।

Note- ध्यान दें कि केवल ड्रैग घटनाओं को निकाल दिया जाता है; माउस घटनाओं जैसे कि मूसमोव को एक ड्रैग ऑपरेशन के दौरान निकाल नहीं दिया जाता है।

डेटाट्रांसफर ऑब्जेक्ट

सभी ड्रैग और ड्रॉप इवेंट के लिए ईवेंट श्रोता तरीके स्वीकार करते हैं Event ऑब्जेक्ट जिसे एक पठनीय विशेषता कहा जाता है dataTransfer।

event.dataTransfer रिटर्न DataTransfer घटना से जुड़ी वस्तु इस प्रकार है -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

DataTransfer वस्तु खींचें और ड्रॉप आपरेशन के बारे में डेटा रखती है। इस डेटा को पुनः प्राप्त किया जा सकता है और नीचे बताए अनुसार DataTransfer ऑब्जेक्ट से जुड़ी विभिन्न विशेषताओं के संदर्भ में सेट किया जा सकता है -

अनु क्रमांक।	DataTransfer विशेषताएँ और उनका विवरण
1	dataTransfer.dropEffect [ = value ] वर्तमान में जिस प्रकार के ऑपरेशन को चुना गया है, वह लौटाता है यह विशेषता सेट की जा सकती है, चयनित ऑपरेशन को बदलने के लिए। संभावित मान कोई नहीं हैं, प्रतिलिपि, लिंक, और स्थानांतरित करें।
2	dataTransfer.effectAllowed [ = value ] उन प्रकार के परिचालनों को लौटाता है जिन्हें अनुमति दी जानी है। अनुमत विशेषताओं को बदलने के लिए यह विशेषता सेट की जा सकती है। संभावित मान हैं none, copy, copyLink, copyMove, link, linkMove, move, all तथा uninitialized।
3	dataTransfer.types एक DOMStringList उन प्रारूपों को सूचीबद्ध करता है जो ड्रैगस्टार्ट ईवेंट में सेट किए गए थे। इसके अलावा, यदि किसी भी फाइल को खींचा जा रहा है, तो एक प्रकार स्ट्रिंग "फाइलें" होगी।
4	dataTransfer.clearData ( [ format ] ) निर्दिष्ट स्वरूपों का डेटा निकालता है। यदि तर्क छोड़ दिया गया है तो सभी डेटा निकालता है।
5	dataTransfer.setData(format, data) निर्दिष्ट डेटा जोड़ता है।
6	data = dataTransfer.getData(format) निर्दिष्ट डेटा लौटाता है। यदि ऐसा कोई डेटा नहीं है, तो खाली स्ट्रिंग लौटाता है।
7	dataTransfer.files यदि कोई हो, तो फाइल के एक फाइललिस्ट को खींचा जाता है।
8	dataTransfer.setDragImage(element, x, y) दिए गए तत्व का उपयोग ड्रैग फीडबैक को अपडेट करने के लिए करता है, किसी भी पहले निर्दिष्ट फीडबैक को बदलने के लिए।
9	dataTransfer.addElement(element) ड्रैग फीडबैक को रेंडर करने के लिए उपयोग किए गए तत्वों की सूची में दिए गए तत्व को जोड़ता है।

ड्रैग एंड ड्रॉप प्रोसेस

ड्रैग एंड ड्रॉप ऑपरेशन को लागू करने के लिए निम्नलिखित कदम उठाए गए हैं -

चरण 1 - एक वस्तु को खींचने योग्य बनाना

यहां उठाए जाने वाले कदम हैं -

• यदि आप किसी तत्व को खींचना चाहते हैं, तो आपको सेट करने की आवश्यकता है 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: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; 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 HTML5 demo</h2>
         <div>Try to drag the purple 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ईवेंट, जिसका उपयोग यह निर्धारित करने के लिए किया जाता है कि उपयोगकर्ता को क्या फ़ीडबैक दिखाया जाना है। यदि ईवेंट को रद्द कर दिया गया है, तो फीडबैक (आमतौर पर कर्सर) को ड्रॉपऑफक्ट विशेषता के मूल्य के आधार पर अपडेट किया जाता है।

• अंततः drop घटना, जो वास्तविक गिरावट का प्रदर्शन करने की अनुमति देती है।

किसी वस्तु को दूसरी वस्तु में गिराने का उदाहरण निम्नलिखित है -

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; 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 HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -