एक सरल HTML5 "ड्रैग एंड ड्रॉप" इंटरफ़ेस बनाना। ड्रैग-एंड-ड्रॉप: यूजर इंटरफ़ेस तत्वों को संचालित करने का एक तरीका 13 ड्रैग एंड ड्रॉप तकनीक

182

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

तत्वों को खींचने और छोड़ने की क्षमता अपने आप में उपयोगी है, लेकिन ड्रॉपेबल इंटरैक्शन के साथ संयोजन में उपयोग किए जाने पर यह और भी उपयोगी है, जिसका वर्णन आगे किया गया है।

खींचने योग्य इंटरैक्शन केवल विशिष्ट HTML मार्कअप और सीएसएस शैलियों के उपयोग के माध्यम से प्राप्त किया जाता है। इसका मतलब यह है कि यह कार्यक्षमता लगभग किसी भी ब्राउज़र में काम करेगी, लेकिन इससे संपन्न तत्व समान देशी ड्रैग-एंड-ड्रॉप टूल के साथ काम नहीं कर पाएंगे। ऑपरेटिंग सिस्टम.

HTML5 विनिर्देश द्वारा परिभाषित ड्रैग-एंड-ड्रॉप ऑपरेशन आमतौर पर मूल ऑपरेटिंग सिस्टम तंत्र का उपयोग करके कार्यान्वित किए जाते हैं। यदि आप jQuery UI ड्रैग-एंड-ड्रॉप तंत्र का उपयोग कर रहे हैं, तो टकराव से बचने के लिए समकक्ष HTML5 सुविधाओं को अक्षम करना बेहतर है। ऐसा करने के लिए, दस्तावेज़ के मुख्य तत्व की खींचने योग्य विशेषता को गलत पर सेट करें।

ड्रैगेबल इंटरेक्शन की स्थापना

ड्रैगएबल इंटरैक्शन के लिए कई अनुकूलन विकल्प हैं। सबसे महत्वपूर्ण गुण, जिनकी चर्चा निम्नलिखित अनुभागों में की गई है, नीचे दी गई तालिका में दिखाए गए हैं:

खींचने योग्य इंटरेक्शन गुण संपत्ति विवरण

एक्सिस	कुछ दिशाओं में जाने की क्षमता को सीमित करता है। डिफ़ॉल्ट मान गलत है, जिसका अर्थ है कि कोई बाधा नहीं है, लेकिन आप "x" (केवल X अक्ष के साथ आगे बढ़ें) या "y" (केवल Y अक्ष के साथ आगे बढ़ें) का मान भी निर्दिष्ट कर सकते हैं
रोकथाम	स्क्रीन के एक विशिष्ट क्षेत्र में ले जाये जाने वाले तत्व के स्थान को सीमित करता है। समर्थित मानों के प्रकारों को संबंधित उदाहरण का उपयोग करके नीचे दी गई तालिका में वर्णित किया गया है। डिफ़ॉल्ट मान गलत है, जिसका अर्थ है कोई प्रतिबंध नहीं
देरी	निर्दिष्ट करता है कि किसी तत्व को चलने से पहले कितनी देर तक खींचा जाना चाहिए। डिफ़ॉल्ट मान 0 है, जिसका अर्थ है कोई देरी नहीं
दूरी	उस दूरी को परिभाषित करता है जो उपयोगकर्ता को किसी तत्व को वास्तव में चलने से पहले उसकी प्रारंभिक स्थिति से खींचना होगा। डिफ़ॉल्ट मान 1 पिक्सेल है
ग्रिड	ग्रिड कोशिकाओं में स्थानांतरित तत्व को स्नैप करने के लिए बाध्य करता है। डिफ़ॉल्ट मान गलत है, जिसका अर्थ है कोई बंधन नहीं

आंदोलन दिशाओं को सीमित करना

ऐसे कई तरीके हैं जिनसे आप किसी तत्व की गति को कुछ निश्चित दिशाओं तक सीमित कर सकते हैं। पहला है अक्ष विकल्प का उपयोग करना, जो आपको गति की दिशा को एक्स या वाई अक्ष तक सीमित करने की अनुमति देता है। इसका एक उदाहरण नीचे दिखाया गया है:

... div.dragElement (फ़ॉन्ट-आकार: बड़ा; बॉर्डर: पतला ठोस काला; पैडिंग: 16px; चौड़ाई: 8em; टेक्स्ट-संरेखण: केंद्र; पृष्ठभूमि-रंग: लाइटग्रे; मार्जिन: 4px ) $(फ़ंक्शन() ($ (".dragElement").खींचने योग्य(( अक्ष: "x")).फ़िल्टर("#dragV").खींचने योग्य("विकल्प", "अक्ष", "y"); )); लंबवत खींचें, क्षैतिज रूप से खींचें, उदाहरण चलाएँ

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

तत्व संचलन के स्वीकार्य क्षेत्र को सीमित करना

आप स्क्रीन के उस क्षेत्र को भी सीमित कर सकते हैं जहां आप किसी आइटम को खींच सकते हैं। ऐसा करने के लिए, रोकथाम विकल्प का उपयोग करें। इस विकल्प में निर्दिष्ट किए जा सकने वाले मान प्रारूप नीचे दी गई तालिका में वर्णित हैं:

रोकथाम विकल्प का उपयोग करने का एक उदाहरण नीचे दिया गया है:

... div.dragElement (फ़ॉन्ट-आकार: बड़ा; बॉर्डर: पतला ठोस काला; पैडिंग: 16px; चौड़ाई: 8em; टेक्स्ट-संरेखण: केंद्र; पृष्ठभूमि-रंग: लाइटग्रे; मार्जिन: 4px) #कंटेनर (बॉर्डर: मीडियम डबल) काला; चौड़ाई: 700px; ऊंचाई: 450px) $(फ़ंक्शन() ($("।dragElement").draggable(( रोकथाम: "पैरेंट")).filter("#dragH").draggable("option", " अक्ष", "x"); )); क्षैतिज रूप से खींचें पैरेंट रन उदाहरण के अंदर खींचें

इस उदाहरण में, दोनों तत्वों को स्थानांतरित करने की उनकी क्षमता सीमित है ताकि उन्हें केवल उनके मूल तत्व के भीतर ही खींचा जा सके, जो एक निश्चित आकार का डिव है। फ़्लोट किए जा रहे divs में से एक में अक्ष विकल्प का उपयोग करके फ़्लोट किए जाने की अतिरिक्त बाधा है, जिसमें यह केवल अपने मूल के भीतर क्षैतिज रूप से आगे बढ़ सकता है। परिणाम चित्र में दिखाया गया है:

किसी तत्व को ग्रिड कोशिकाओं में ले जाने की क्षमता को सीमित करना

ग्रिड विकल्प आपको स्थानांतरित तत्व की बाइंडिंग को ग्रिड कोशिकाओं में सेट करने की अनुमति देता है। यह विकल्प मान के रूप में दो तत्वों की एक सरणी लेता है जो पिक्सेल में ग्रिड कोशिकाओं की चौड़ाई और ऊंचाई निर्दिष्ट करता है। ग्रिड विकल्प का उपयोग करने का एक उदाहरण नीचे दिया गया है:

... #खींचने योग्य (फ़ॉन्ट-आकार: x-बड़ा; बॉर्डर: पतला ठोस काला; चौड़ाई: 5em; पाठ-संरेखण: केंद्र; पैडिंग:10px) $(फ़ंक्शन() ( $("#खींचने योग्य").खींचने योग्य( ( ग्रिड: )); )); मुझे खींचो चलाओ उदाहरण

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

आप फ्री मूवमेंट अक्ष को 1 पर सेट करके केवल एक दिशा के लिए स्नैप प्रभाव बना सकते हैं। उदाहरण के लिए, यदि आप ग्रिड विकल्प को सेट करते हैं, तो क्षैतिज रूप से स्थानांतरित होने पर तत्व 100 पिक्सेल चौड़ी ग्रिड कोशिकाओं पर स्नैप करेगा, लेकिन लंबवत रूप से स्वतंत्र रूप से चलेगा।

देरी से हटें

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

दोनों सेटिंग्स का उपयोग करने का एक उदाहरण नीचे दिया गया है:

... #समय, #दूरी (फ़ॉन्ट-आकार: बड़ा; बॉर्डर: पतला ठोस काला; पैडिंग: 10px; चौड़ाई: 120px; पाठ-संरेखण: केंद्र; पृष्ठभूमि-रंग: लाइटग्रे; मार्जिन: 4px; ) $(फ़ंक्शन( ) ( $("#time").खींचने योग्य(( विलंब: 1000 )) $("#दूरी").खींचने योग्य(( दूरी: 150 )) )); समय विलंब के साथ ब्लॉक करें न्यूनतम दूरी के साथ ब्लॉक करें उदाहरण चलाएं

इस उदाहरण में दो गतिशील तत्व हैं, जिनमें से एक को विलंब विकल्प का उपयोग करके विलंबित किया गया है, और दूसरे को दूरी विकल्प का उपयोग करके विलंबित किया गया है।

विलंब विकल्प द्वारा निर्दिष्ट विलंब के मामले में, उपयोगकर्ता को तत्व को वास्तव में स्थानांतरित करने से पहले एक निर्दिष्ट समय तक खींचना होगा। इस उदाहरण में, इस अवधि की अवधि 1000 एमएस है। इस समय माउस को हिलाना आवश्यक नहीं है, लेकिन संपूर्ण विलंब अवधि के दौरान माउस बटन दबा रहना चाहिए, जिसके बाद माउस को घुमाकर तत्व को स्थानांतरित किया जा सकता है। देरी का समय बीत जाने के बाद, ले जाया जा रहा तत्व माउस पॉइंटर स्थान पर स्नैप हो जाएगा, जो पहले चर्चा की गई ग्रिड, क्षेत्र और अक्ष विकल्पों द्वारा लगाए गए बाधाओं के अधीन होगा।

दूरी विकल्प का एक समान प्रभाव होता है, लेकिन इस मामले में उपयोगकर्ता को तत्व के शुरुआती स्थान से किसी भी दिशा में माउस पॉइंटर को कम से कम एक निर्दिष्ट संख्या में पिक्सेल खींचना होगा। स्थानांतरित किया जा रहा तत्व फिर वर्तमान सूचक स्थान पर पहुंच जाएगा।

यदि आप दोनों सेटिंग्स को एक ही तत्व पर लागू करते हैं, तो स्थानांतरित तत्व तब तक नहीं हिलेगा जब तक कि दोनों देरी मानदंड पूरे नहीं हो जाते, यानी। जब तक किसी तत्व को खींचने का प्रयास एक निर्दिष्ट समय तक चलता है और जब तक माउस पॉइंटर निर्दिष्ट संख्या में पिक्सेल नहीं हिलाता।

ड्रैगेबल इंटरेक्शन विधियों का उपयोग करना

ड्रैगेबल इंटरेक्शन के लिए परिभाषित सभी विधियां उन आधार विधियों के सेट का हिस्सा हैं जिन्हें आप विजेट्स को देखते समय पहले ही देख चुके हैं। ड्रैगेबल इंटरैक्शन के लिए कोई विशिष्ट विधियां नहीं हैं, इसलिए हम उन्हें विस्तार से कवर नहीं करेंगे। उपलब्ध विधियों की सूची नीचे दी गई तालिका में दी गई है:

खींचने योग्य इंटरेक्शन इवेंट का उपयोग करना

इंटरेक्शन ड्रैगएबल घटनाओं के एक सरल सेट का समर्थन करता है जो किसी तत्व को खींचे जाने पर आपको सूचित करता है। इन घटनाओं का वर्णन नीचे दी गई तालिका में किया गया है:

विजेट इवेंट की तरह, इन इवेंट का भी जवाब दिया जा सकता है। प्रारंभ और समाप्ति घटनाओं को संभालने का एक उदाहरण नीचे दिया गया है:

... #खींचने योग्य (फ़ॉन्ट-आकार: x-बड़ा; बॉर्डर: पतला ठोस काला; चौड़ाई: 190px; पाठ-संरेखण: केंद्र; पैडिंग:10px) $(फ़ंक्शन() ( $("#खींचने योग्य").खींचने योग्य( (प्रारंभ: फ़ंक्शन() ($("#खींचने योग्य").पाठ("मुझे खींचें..."), रोकें: फ़ंक्शन() ( $("#खींचने योग्य").पाठ("मुझे खींचें") ) )) ; )); मुझे खींचो चलाओ उदाहरण

यह उदाहरण किसी तत्व को खींचते समय उसकी पाठ्य सामग्री को बदलने के लिए स्टार्ट और स्टॉप इवेंट का उपयोग करता है। यह लाभ इस तथ्य के कारण है कि ड्रैगगेबल का इंटरैक्शन पूरी तरह से HTML और CSS का उपयोग करके कार्यान्वित किया जाता है: आप ड्रैगगेबल तत्व की स्थिति को बदलने के लिए jQuery का उपयोग कर सकते हैं, भले ही वह स्क्रीन पर चलता हो।

ड्रॉपएबल इंटरेक्शन का उपयोग करना

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

जिन तत्वों पर ड्रॉपेबल इंटरेक्शन लागू किया गया है (तत्व प्राप्त करने वाले) वे ड्रैगेबल इंटरेक्शन का उपयोग करके बनाए गए चल तत्वों को स्वीकार करने की क्षमता प्राप्त करते हैं।

प्राप्त करने वाले तत्व ड्रॉपपेबल() विधि का उपयोग करके बनाए जाते हैं, लेकिन उपयोगी कार्यक्षमता प्राप्त करने के लिए आपको इस प्रकार के इंटरैक्शन के लिए परिभाषित ईवेंट हैंडलर बनाने की आवश्यकता होगी। उपलब्ध घटनाएँ नीचे दी गई तालिका में दिखाई गई हैं:

ड्रॉप करने योग्य इंटरैक्शन इवेंट घटना विवरण

बनाएं	तब होता है जब किसी तत्व पर ड्रॉपेबल इंटरैक्शन लागू किया जाता है
सक्रिय	तब होता है जब उपयोगकर्ता स्थानांतरित किए जा रहे तत्व को खींचना शुरू करता है
निष्क्रिय करें	तब होता है जब उपयोगकर्ता ले जाये जा रहे तत्व को खींचना बंद कर देता है
ऊपर	यह तब होता है जब उपयोगकर्ता एक फ्लोटेबल तत्व को प्राप्त तत्व पर खींचता है (बशर्ते माउस बटन अभी तक जारी नहीं किया गया हो)
बाहर	तब होता है जब उपयोगकर्ता प्राप्त तत्व के बाहर ले जाए जा रहे तत्व को खींचता है
बूँद	तब होता है जब उपयोगकर्ता प्राप्त तत्व पर ले जाए जा रहे तत्व को छोड़ देता है

एक सरल प्राप्तकर्ता तत्व बनाने का एक उदाहरण जिसके लिए सिंगल ड्रॉप इवेंट हैंडलर परिभाषित किया गया है, नीचे दिया गया है:

... #खींचने योग्य, #ड्रॉप करने योग्य (फ़ॉन्ट-आकार: बड़ा; बॉर्डर: पतला ठोस काला; पैडिंग: 10px; चौड़ाई: 100px; टेक्स्ट-संरेखण: केंद्र; पृष्ठभूमि-रंग: लाइटग्रे; मार्जिन: 4px;) #ड्रॉपेबल (पैडिंग) : 20px; स्थिति: निरपेक्ष; दाएँ: 5px;) $(फ़ंक्शन() ($("#ड्रैगगेबल").ड्रैगेबल(); $("#ड्रॉपेबल").ड्रॉपेबल(( ड्रॉप: फ़ंक्शन() ( $(" #खींचने योग्य").पाठ("बाएं") ) )); )); मुझे यहाँ छोड़ें, मुझे खींचें, चलाएँ उदाहरण

यह उदाहरण दस्तावेज़ में एक div तत्व जोड़ता है जिसकी पाठ सामग्री स्ट्रिंग "यहाँ छोड़ें" द्वारा दर्शायी जाती है। हम jQuery का उपयोग करके इस तत्व का चयन करते हैं और ड्रॉपपेबल() विधि को कॉल करते हैं, इसे एक सेटिंग ऑब्जेक्ट पास करते हैं जो ड्रॉप इवेंट के लिए हैंडलर को परिभाषित करता है। इस घटना की प्रतिक्रिया टेक्स्ट() विधि का उपयोग करके स्थानांतरित किए जा रहे तत्व के टेक्स्ट को बदलना है।

इस उदाहरण में बनाया गया ड्रैग-एंड-ड्रॉप इंटरैक्शन सरल है, लेकिन यह यह समझाने के लिए एक उपयोगी संदर्भ प्रदान करता है कि ड्रैगएबल और ड्रॉपएबल इंटरैक्शन एक साथ कैसे काम करते हैं। तत्वों को खींचने की प्रक्रिया के विभिन्न चरणों को चित्र में दिखाया गया है:

यह सब बहुत सरल लगता है. हम स्थानांतरित किए जा रहे तत्व को तब तक खींचते हैं जब तक कि वह प्राप्तकर्ता तत्व के ऊपर न आ जाए और उसे छोड़ देते हैं। जो तत्व छोड़ा गया है वह वहीं रहता है जहां उसे छोड़ा गया था, और ड्रॉप घटना के जवाब में उसकी पाठ्य सामग्री बदल जाती है। निम्नलिखित अनुभाग दिखाते हैं कि उपयोगकर्ता अनुभव को बेहतर बनाने के लिए अन्य ड्रॉपएबल इंटरैक्शन इवेंट का उपयोग कैसे करें।

लक्ष्य प्राप्त करने वाली वस्तु की रोशनी

सक्रिय और निष्क्रिय घटनाओं का उपयोग करके, जब उपयोगकर्ता किसी तत्व को खींचने की प्रक्रिया शुरू करता है तो आप लक्ष्य प्राप्त करने वाली वस्तु को हाइलाइट कर सकते हैं। कई स्थितियों में, यह विचार बहुत उपयोगी है क्योंकि यह उपयोगकर्ता को विश्वसनीय मार्गदर्शन प्रदान करता है कि कौन से तत्व ड्रैग-एंड-ड्रॉप मॉडल का हिस्सा हैं। एक संगत उदाहरण नीचे दिया गया है:

... $(फ़ंक्शन() ($("#ड्रैगेबल").ड्रैगेबल(); $("#ड्रॉपेबल").ड्रॉपेबल(( ड्रॉप: फ़ंक्शन() ( $("#ड्रैगेबल").टेक्स्ट("लेफ्ट ") ), सक्रिय करें: फ़ंक्शन() ($("#ड्रॉपेबल").css(( बॉर्डर: "मीडियम डबल ग्रीन", बैकग्राउंड कलर: "लाइटग्रीन" )); ), निष्क्रिय करें: फ़ंक्शन() ( $("#ड्रॉपेबल ").css("सीमा", "").css("पृष्ठभूमि-रंग", ""); ) )); )); ...उदाहरण चलाएँ

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

डीएक्टिवेट इवेंट का उपयोग प्राप्त तत्व से सीएसएस संपत्ति मूल्यों को हटाने और जैसे ही उपयोगकर्ता माउस बटन जारी करता है, उसे उसकी मूल स्थिति में वापस करने के लिए किया जाता है। (यह घटना तब होती है जब किसी तत्व को खींचना बंद हो जाता है, भले ही खींचा जा रहा तत्व प्राप्तकर्ता तत्व पर छोड़ा गया हो या नहीं।) इस प्रक्रिया को चित्र में दिखाया गया है:

अतिव्यापी तत्वों को संभालना

ओवर एंड आउट इवेंट हैंडलिंग को जोड़कर ड्रैग-एंड-ड्रॉप तकनीक में सुधार किया जा सकता है। ओवर इवेंट तब होता है जब स्थानांतरित होने वाले तत्व का 50% प्राप्त तत्व के किसी भी हिस्से पर होता है। आउट इवेंट तब होता है जब पहले से ओवरलैप होने वाले तत्व अब ओवरलैप नहीं होते हैं। इन घटनाओं पर प्रतिक्रिया का एक उदाहरण नीचे दिया गया है:

$(function() ($("#draggable").draggable(); $("#droppable").droppable(( ड्रॉप: function() ($("#draggable").text("Left") ) , सक्रिय करें: फ़ंक्शन() ($("#ड्रॉपेबल").सीएसएस(( बॉर्डर: "मीडियम डबल ग्रीन", बैकग्राउंड कलर: "लाइटग्रीन" )); , निष्क्रिय करें: फ़ंक्शन() ($("#ड्रॉपएबल")। सीएसएस("बॉर्डर", "").सीएसएस("बैकग्राउंड-कलर", ""); ), ओवर: फंक्शन() ( $("#ड्रॉपेबल").सीएसएस(( बॉर्डर: "मीडियम डबल रेड", बैकग्राउंड कलर : "लाल" )); ), आउट: फ़ंक्शन() ($("#ड्रॉपेबल").css("बॉर्डर", "").css("बैकग्राउंड-कलर", ""); ) )); ) ); उदाहरण चलाएँ

पिछले उदाहरण की तरह यहां भी समान हैंडलर फ़ंक्शन का उपयोग किया जाता है, लेकिन इस मामले में वे बार-बार होने वाली घटनाओं से जुड़े हुए हैं। जब प्राप्त तत्व स्थानांतरित किए जा रहे तत्व के कम से कम 50% को ओवरलैप करता है, तो इसे एक फ्रेम में संलग्न किया जाता है और इसकी पृष्ठभूमि का रंग बदल जाता है, जैसा कि चित्र में दिखाया गया है:

इस 50% सीमा को ओवरलैप थ्रेशोल्ड (सहिष्णुता) कहा जाता है, जिसका मूल्य प्राप्त तत्व बनाते समय निर्धारित किया जा सकता है, जैसा कि बाद में दिखाया जाएगा।

ड्रॉपएबल इंटरैक्शन सेट करना

ड्रॉपएबल इंटरैक्शन में कई गुण हैं जिन्हें आप इसके व्यवहार को अनुकूलित करने के लिए बदल सकते हैं। ये संपत्तियाँ नीचे दी गई तालिका में सूचीबद्ध हैं:

ड्रॉप करने योग्य इंटरेक्शन गुण संपत्ति विवरण

अक्षम	यदि यह विकल्प सत्य है, तो ड्रॉपएबल इंटरेक्शन कार्यक्षमता प्रारंभ में अक्षम है। डिफ़ॉल्ट मान गलत है
स्वीकार करना	चल तत्वों के सेट को सीमित करता है जिन पर प्राप्तकर्ता तत्व प्रतिक्रिया देगा। डिफ़ॉल्ट मान * है, जो किसी भी तत्व से मेल खाता है
सक्रियक्लास	एक वर्ग को परिभाषित करता है जिसे सक्रिय घटना के जवाब में सौंपा जाएगा और निष्क्रिय घटना के जवाब में हटा दिया जाएगा
होवरक्लास	एक वर्ग को परिभाषित करता है जिसे एक ओवर इवेंट के जवाब में सौंपा जाएगा और एक आउट इवेंट के जवाब में हटा दिया जाएगा
सहनशीलता	ओवरलैप की न्यूनतम डिग्री को परिभाषित करता है जिस पर एक ओवर इवेंट घटित होता है

स्थानांतरित किए जाने वाले अनुमत तत्वों को सीमित करना

आप स्वीकार विकल्प का उपयोग करके ड्रॉप करने योग्य तत्वों के सेट को सीमित कर सकते हैं जिन्हें ड्रॉप करने योग्य इंटरऑपरेबिलिटी कार्यक्षमता वाले तत्व द्वारा स्वीकार किया जाएगा। स्वीकार विकल्प का मान चयनकर्ता पर सेट किया जाना चाहिए। परिणामस्वरूप, ड्रॉपएबल इंटरेक्शन इवेंट केवल तभी घटित होंगे जब स्थानांतरित किया जा रहा तत्व निर्दिष्ट चयनकर्ता से मेल खाता है। एक संगत उदाहरण नीचे दिया गया है:

... .खींचने योग्य, #ड्रॉप करने योग्य (फ़ॉन्ट-आकार: बड़ा; बॉर्डर: पतला ठोस काला; पैडिंग: 10px; चौड़ाई: 100px; टेक्स्ट-संरेखण: केंद्र; पृष्ठभूमि-रंग: लाइटग्रे; मार्जिन: 4px;) #ड्रॉपेबल (पैडिंग) : 20px; स्थिति: निरपेक्ष; दाएँ: 5px;) $(फ़ंक्शन() ($("।ड्रैगेबल").ड्रैगेबल(); $("#ड्रॉपेबल").ड्रॉपेबल(( ड्रॉप: फ़ंक्शन(इवेंट, यूआई) ( ui.draggable.text("Left") ), सक्रिय करें: फ़ंक्शन() ($("#droppable").css(( बॉर्डर: "मीडियम डबल ग्रीन", बैकग्राउंड कलर: "लाइटग्रीन" )); ), निष्क्रिय करें: फ़ंक्शन () ( $("#droppable").css("border", "").css("background-color", ""); ), स्वीकार करें: "#drag1" )); )); तत्व 1 तत्व 2 रन उदाहरण यहां छोड़ें

इस उदाहरण में ड्रैग1 और ड्रैग2 आईडी के साथ दो ड्रैग करने योग्य तत्व हैं। एक प्राप्त तत्व बनाते समय, हम स्वीकार विकल्प का उपयोग करते हैं, जिसके साथ हम संकेत देते हैं कि केवल ड्रैग 1 तत्व ही स्थानांतरित होने के लिए स्वीकार्य तत्व होगा।

जब आप ड्रैग1 तत्व को खींचते हैं, तो आपको पिछले उदाहरणों जैसा ही प्रभाव दिखाई देगा। उचित समय पर, प्राप्तकर्ता तत्व के लिए सक्रिय, निष्क्रिय, ओवर और आउट ईवेंट को सक्रिय कर दिया जाएगा। उसी समय, यदि आप ड्रैग2 तत्व को खींचते हैं जो स्वीकार पैरामीटर में निर्दिष्ट चयनकर्ता से मेल नहीं खाता है, तो इन घटनाओं को सक्रिय नहीं किया जाएगा। इस तत्व को स्वतंत्र रूप से स्थानांतरित किया जा सकता है, लेकिन इसे प्राप्त करने वाले तत्व द्वारा महसूस नहीं किया जाएगा।

परिवर्तन पर ध्यान दें कि हम एक स्वीकार्य फ्लोटेबल तत्व का चयन कैसे करते हैं जिस पर टेक्स्ट() विधि को कॉल करना है। जब दस्तावेज़ में केवल एक गतिशील तत्व था, तो आईडी विशेषता इसके लिए पर्याप्त थी:

ड्रॉप: फ़ंक्शन() ($('#खींचने योग्य').पाठ('बाएं') ),

इस उदाहरण में दो तत्वों को स्थानांतरित करना है, और आईडी विशेषता के आधार पर चयन करने से काम नहीं चलेगा वांछित परिणाम, क्योंकि इस मामले में पाठ हमेशा एक ही फ़्लोट किए गए तत्व में बदल जाएगा, भले ही प्राप्तकर्ता तत्व के लिए कौन सा स्वीकार्य हो।

समाधान यूआई ऑब्जेक्ट का उपयोग करना है, जो jQuery यूआई प्रत्येक इवेंट हैंडलर को एक अतिरिक्त तर्क के रूप में प्रदान करता है। यूआई ऑब्जेक्ट की ड्रैग करने योग्य संपत्ति एक jQuery ऑब्जेक्ट लौटाती है जिसमें वह तत्व होता है जिसे उपयोगकर्ता लक्ष्य तत्व पर खींचता है या छोड़ने का प्रयास करता है, जिससे वांछित तत्व को इस तरह चुना जा सकता है:

ड्रॉप: फ़ंक्शन(इवेंट, यूआई) ( ui.draggable.text("बाएं") ),

ओवरलैप सीमा बदलना

डिफ़ॉल्ट रूप से, ओवर इवेंट केवल तब होता है जब स्थानांतरित किए जा रहे तत्व का कम से कम 50% प्राप्त तत्व को ओवरलैप करता है। इस थ्रेशोल्ड ओवरलैप की मात्रा को सहिष्णुता विकल्प का उपयोग करके बदला जा सकता है, जो नीचे दी गई तालिका में दिखाए गए मान ले सकता है:

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

क्लोन मान jQuery यूआई को उसकी सभी सामग्रियों के साथ स्थानांतरित किए जा रहे तत्व की एक प्रति बनाने और परिणामी परिणाम को सहायक तत्व के रूप में उपयोग करने के लिए कहता है। परिणाम चित्र में दिखाया गया है:

जब उपयोगकर्ता स्थानांतरित किए जा रहे तत्व पर माउस बटन छोड़ता है, तो सहायक तत्व हटा दिया जाता है, जिससे स्थानांतरित होने वाला तत्व और प्राप्त करने वाला तत्व अपनी मूल स्थिति में रह जाता है।

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

... $(फ़ंक्शन() ($("div.draggable")..png"/>") ) )); $("#basket").droppable(( सक्रियक्लास: "सक्रिय", होवरक्लास: "होवर" )); )); ...उदाहरण चलाएँ

जब उपयोगकर्ता किसी तत्व को खींचना शुरू करता है, तो jQuery यूआई सहायक पैरामीटर द्वारा निर्दिष्ट फ़ंक्शन को कॉल करता है और खींचे जाने वाले ऑब्जेक्ट के रूप में लौटाए गए तत्व का उपयोग करता है। इस मामले में, मैं img तत्व बनाने के लिए jQuery का उपयोग कर रहा हूं। परिणाम चित्र में दिखाया गया है:

एक छोटी छवि स्थानांतरित किए जा रहे तत्व के लिए प्रॉक्सी के रूप में कार्य करती है, जिससे दस्तावेज़ में अन्य तत्वों पर नज़र रखना बहुत आसान हो जाता है।

यूआई ऑब्जेक्ट जिसे jQuery यूआई ड्रॉपपेबल इंटरेक्शन इवेंट में पास करता है उसमें एक सहायक संपत्ति होती है, और इस संपत्ति का उपयोग सहायक को खींचने के दौरान हेरफेर करने के लिए किया जा सकता है। बार-बार होने वाली घटनाओं के संयोजन में इस संपत्ति का उपयोग करने का एक उदाहरण नीचे दिया गया है:

... $(फ़ंक्शन() ($("div.draggable")..png"/>") ) )); $("#basket").droppable(( एक्टिवक्लास: "एक्टिव", होवरक्लास: "होवर", ओवर: फंक्शन(इवेंट, यूआई) ( ui.helper.css("बॉर्डर", "थिक सॉलिड #27e6ed")) , बाहर: फ़ंक्शन (इवेंट, यूआई) ( ui.helper.css ("बॉर्डर", "") ) )); )); ...

यहां ओवर और आउट इवेंट और ui.helper प्रॉपर्टी का उपयोग सहायक तत्व के चारों ओर एक बॉर्डर प्रदर्शित करने के लिए किया जाता है जब यह प्राप्तकर्ता तत्व को ओवरलैप करता है। परिणाम चित्र में दिखाया गया है:

तत्व किनारों पर स्नैप करें

स्नैप विकल्प का उपयोग करके, आप यह सुनिश्चित कर सकते हैं कि स्थानांतरित तत्व उन तत्वों के किनारों पर "आकर्षित" है जिनके बगल से वह गुजरता है। यह विकल्प एक चयनकर्ता को मान के रूप में स्वीकार करता है। स्थानांतरित किया जा रहा तत्व निर्दिष्ट चयनकर्ता से मेल खाने वाले किसी भी तत्व के किनारों पर स्नैप करेगा। स्नैप विकल्प का उपयोग करने का एक उदाहरण नीचे दिया गया है:

jQuery यूआई उदाहरण चलाएं #स्नैपर, .ड्रैगेबल, .ड्रॉपेबल (फ़ॉन्ट-आकार: बड़ा; बॉर्डर: मीडियम सॉलिड ब्लैक; पैडिंग: 4px; चौड़ाई: 150px; टेक्स्ट-एलाइन: सेंटर; बैकग्राउंड-कलर: लाइटग्रे; मार्जिन-बॉटम: 10px ;).ड्रॉपेबल (मार्जिन-दाएं: 5px; ऊंचाई: 50px; चौड़ाई: 120px) #ड्रॉपकंटेनर (स्थिति: पूर्ण; दाएं: 5px;) डिव स्पैन (स्थिति: सापेक्ष; शीर्ष: 25%) .ड्रॉपेबल.एक्टिव (बॉर्डर: मध्यम ठोस हरा) .ड्रॉपेबल.होवर (पृष्ठभूमि-रंग: हल्का हरा) #स्नैपर (स्थिति: पूर्ण; बाएं: 35%; सीमा: मध्यम ठोस काला; चौड़ाई: 180px; ऊंचाई: 50px) $(फ़ंक्शन() ( $(" div.draggable").draggable(( स्नैप: "#स्नैपर, .ड्रॉपेबल", स्नैपमोड: "दोनों", स्नैपटॉलरेंस: 50 )); $("#basket").droppable(( एक्टिवक्लास: "एक्टिव", होवरक्लास: "होवर" )); )); कार्ट स्नैप यहाँ मुझे खींचें

जब कोई गतिमान तत्व उपयुक्त तत्वों में से किसी एक के पास पहुंचता है, तो वह उसकी ओर इस तरह से "आकर्षित" होता है कि उनके आसन्न किनारे स्पर्श करते हैं। इस तरह के बंधन के लिए, आप केवल प्राप्तकर्ता ही नहीं, बल्कि किसी भी तत्व का चयन कर सकते हैं। इस उदाहरण में, मैंने एक div तत्व जोड़ा और स्नैप विकल्प को एक मान पर सेट किया जो उस तत्व के साथ-साथ दस्तावेज़ में प्राप्त करने वाले तत्व का चयन करता है।

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

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

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

इस ट्यूटोरियल में हम एक स्क्रिप्ट बनाएंगे जिसका उपयोग आप अपनी वेबसाइट पर डायनामिक ड्रैग और ड्रॉप आयत बनाने के लिए कर सकते हैं। प्रक्रिया jQuery द्वारा प्रबंधित की जाती है। ऐसी स्क्रिप्ट तैयार कार्यक्षमता प्रदान करके समय बचाती हैं! और ड्रैग-एंड-ड्रॉप लाइब्रेरी का उपयोग अन्य परियोजनाओं में किया जा सकता है।

सामग्री तैयार करना

सबसे पहले, आइए प्रोजेक्ट के लिए एक छोटी वेबसाइट तैयार करें। प्रोजेक्ट फ़ोल्डर में आपको उल्लेखनीय नाम "जेएस" और "सीएसएस" के साथ दो निर्देशिकाएं बनाने की आवश्यकता है खाली फ़ाइल Index.html. कोड बहुत सरल होगा, ताकि काम का एक स्पष्ट विचार हो, और आगे के विकास के लिए एक बिंदु हो।

नीचे हमारे लिए कोड है HTML फ़ाइल. अध्याय में सिरहम 3 स्क्रिप्ट शामिल करते हैं। मुख्य jQuery स्क्रिप्ट Google कोड सर्वर से लोड की जाएगी। हमारी स्टाइल फ़ाइल style.css भी शामिल है, जिसमें बनाने के लिए मुख्य गुण शामिल हैं उपस्थितिहमारा दस्तावेज़.

मुझे खींचो हाँ, हाँ. बिल्कुल मैं. आप मुझे भी खींच सकते हैं (zIndex: 200, अपारदर्शिता: .9)

पी.एस.: आप मुझे कहीं भी छोड़ सकते हैं!

अंदर का भाग शरीरकेवल दो ब्लॉक रखे गए हैं डिव, जिसमें दोनों आयतें हैं। कोड काफी सरल और समझने योग्य है। प्रत्येक आयत के अंदर क्लास हैंडलर और हैंडलर2 के साथ हेडर होते हैं। यह महत्वपूर्ण है क्योंकि जब आप खींचते हैं तो प्रत्येक आयत अलग-अलग व्यवहार करता है।

सीएसएस स्थापित करना

HTML कोड बहुत सरल है. यदि आप मूल मार्कअप को समझते हैं, तो सीएसएस शैलियाँकोई कठिनाई भी पेश नहीं करेगा. मुख्य रूप से परिभाषित मार्जिन, पैडिंग और रंग।

बॉडी,एचटीएमएल (फ़ॉन्ट-परिवार:कैलिब्री, सैन्स-सेरिफ़; पृष्ठभूमि:#eaf3fb; फ़ॉन्ट-आकार:12पीएक्स; ऊंचाई:1000पीएक्स; लाइन-ऊंचाई:18पीएक्स;) पी (ऊंचाई:30पीएक्स;)

चयनकर्ताओं शरीर, एचटीएमएलकेवल डेमो पेज के लिए उपयोग किया जाता है। और सभी सामग्री को दो खींचने योग्य आयतों में रखा गया है।

Dv1 (चौड़ाई:200px; पृष्ठभूमि-रंग:#eff7ff; सीमा:1px ठोस #96c2f1; स्थिति:पूर्ण; बाएँ:100px; शीर्ष:100px; ) .dv1 h2 (पृष्ठभूमि-रंग:#b2d3f5; पैडिंग:5px; फ़ॉन्ट- परिवार:जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; फ़ॉन्ट-आकार:1.0एम; टेक्स्ट-ट्रांसफ़ॉर्म:अपरकेस; फ़ॉन्ट-वेट:बोल्ड; रंग:#3ए424ए; मार्जिन:1पीएक्स; कर्सर:मूव; ) .dv1 div (पैडिंग:5px; मार्जिन-बॉटम:10px; ) .dv2 (बैकग्राउंड-रंग:#f6ebfb; बॉर्डर:1px सॉलिड #a36fde; चौड़ाई:550px; स्थिति:निरपेक्ष; कर्सर:मूव; बाएँ:400px; शीर्ष:230px; ) .dv2 h2 (पृष्ठभूमि-रंग:#eacfe9; अक्षर-रिक्ति:-0.09em; फ़ॉन्ट-आकार:1.8em; फ़ॉन्ट-भार: बोल्ड; पैडिंग:15px; मार्जिन:1px; रंग:#241f24; कर्सर:स्थानांतरित;) .dv2 .content2 (पैडिंग:5px; मार्जिन-बॉटम:10px;)

दोनों वर्गों .dv1 और .dv2 के लिए हम निरपेक्ष स्थिति का उपयोग करते हैं। यह ज़रूरी नहीं है और शायद सबसे ज़्यादा भी नहीं सबसे अच्छा तरीकाखींचने योग्य आयतों को स्थित करने के लिए। हालाँकि, हमारे उदाहरण के लिए, यह स्थिति समझ में आती है, क्योंकि हर बार जब पृष्ठ ताज़ा होता है, तो आयतें कुछ स्थानों पर स्थापित हो जाती हैं।

इसके अलावा अंतर देखना आसान बनाने के लिए आयतों के फ़ॉन्ट और रंग भी अलग-अलग हैं।

अन्यथा, ब्लॉकों के शीर्षक और सामग्री लगभग समान हैं। यदि आप अपने प्रोजेक्ट में शैलियों की प्रतिलिपि बना रहे हैं, तो शुरू करने से पहले नाम बदल दें। कुछ मामलों में, कक्षाओं के बजाय आईडी का उपयोग करना अधिक समझ में आता है, जैसे कि एक विशिष्ट ब्लॉक के लिए ड्रैग-एंड-ड्रॉप तकनीक का उपयोग करते समय।

जावास्क्रिप्ट को पार्स करना

दो जावास्क्रिप्ट फ़ाइलों में इसे काम करने के लिए आवश्यक सभी कोड शामिल हैं। हम jQuery के साथ काम करने के विवरण को छोड़ देंगे, क्योंकि यह पाठ के दायरे से परे है। आइए jquery.dragndrop.js फ़ाइल पर ध्यान दें।

पंक्ति 22 ड्रैग्स फ़ंक्शन को परिभाषित करती है।

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, हैंडलर: null, onMove: function() ( ), onDrop: function() ( ) ), opts );

यह रिटर्न वैरिएबल और इनिशियलाइज़ेशन डेटा सेट करता है खींच लेता है. अन्य फ़ंक्शंस में विकल्प पास करने के लिए jQuery के साथ काम करते समय इस विधि का आमतौर पर उपयोग किया जाता है। आंतरिक रूप से हम सभी के लिए चर निर्धारित करते हैं उपलब्ध विकल्पखींचने योग्य आयतों के लिए.

कोड के अगले भाग में ड्रैगड्रॉप वेरिएबल के लिए इवेंट हैंडलर शामिल हैं। दोनों घटनाएँ खींचनाऔर बूँदकॉल फ़ंक्शंस इवेंट पैरामीटर्स को पास कर रहे हैं। ये घटनाएँ तब घटित होती हैं जब आप किसी ऑब्जेक्ट को खींचने के लिए माउस बटन दबाते हैं और फिर उसे छोड़ देते हैं।

वर ड्रैगड्रॉप = (ड्रैग: फंक्शन(ई) ( वर ड्रैगडेटा = ई.डेटा.ड्रैगडेटा; ड्रैगडेटा.टारगेट.सीएसएस(( बाएं: ड्रैगडेटा.लेफ्ट + ई.पेजएक्स - ड्रैगडेटा.ऑफलेफ्ट, शीर्ष: ड्रैगडेटा.टॉप + ई.पेजवाई - ड्रैगडेटा.ऑफटॉप )); ड्रैगडेटा.हैंडलर.सीएसएस(( कर्सर: "मूव" )); ड्रैगडेटा.टार्गेट.सीएसएस (( कर्सर: "मूव" )); ड्रैगडेटा.ऑनमूव(ई); ), ड्रॉप: फंक्शन( ई) ( var ड्रैगडेटा = ई.डेटा.ड्रैगडेटा; ड्रैगडेटा.टारगेट.सीएसएस(ड्रैगडेटा.ओल्डसीएसएस); //.सीएसएस(( "अस्पष्टता": "" )); ड्रैगडेटा.हैंडलर.सीएसएस("कर्सर", ड्रैगडेटा। OldCss.cursor);dragData.onDrop(e);

हमारे फ़ंक्शन प्रत्येक ऑब्जेक्ट की सीएसएस स्थिति में हेरफेर करते हैं। आपके ऑब्जेक्ट की पूर्ण स्थिति बदलने से आपके कोड के काम करने के तरीके पर कोई असर नहीं पड़ेगा, क्योंकि प्रत्येक जावास्क्रिप्ट फ़ंक्शन ऑब्जेक्ट के लिए परिभाषित किसी भी शैली को बदल देता है।

शेष कोड हैंडलर की जाँच करता है और अन्य शैलियों में कॉस्मेटिक परिवर्तन करता है। यहां आप पारदर्शिता, फ़ॉन्ट और फ़ॉन्ट रंग में परिवर्तन जोड़ सकते हैं, या नए पैराग्राफ जोड़ सकते हैं।

खींचें/छोड़ें फ़ंक्शन

दूसरी fn.js फ़ाइल में बहुत सरल कोड है। हम दस्तावेज़ के पूरी तरह से लोड होने तक प्रतीक्षा करते हैं, जिसके बाद हम अपने कार्यों को कॉल करते हैं। फ़ंक्शन के दो उदाहरण परिभाषित हैं खींच लेता है, जिस पर पहले चर्चा की गई थी।

हमारे पास .dv1 और .dv2 कक्षाओं वाले दो चल ब्लॉक हैं। यदि आपको एक चल ब्लॉक को छोड़ने की आवश्यकता है, तो आपको बस कोड के दूसरे भाग को हटाने की आवश्यकता है। एक अन्य चल ब्लॉक जोड़ना भी आसान है। आपको बस जोड़ने की जरूरत है नयी विशेषताइस फ़ाइल में.

पहला कदम फ़ंक्शन को कॉल करते समय विकल्प सेट करना है। हैंडलर नाम सेट करना सुनिश्चित करें. इसके साथ, हम jQuery को बताते हैं कि दस्तावेज़ के एक निश्चित क्षेत्र में माउस बटन दबाए जाने पर किस हैंडलर का उपयोग करना है। हैंडलर नाम एक क्लास या आईडी विशेषता हो सकता है।

हमारे पहले फ़ंक्शन में दो इवेंट हैंडलर ऑनमूव और ऑनड्रॉप हैं। दोनों नए फ़ंक्शंस को कॉल करते हैं जिन्हें वर्तमान ईवेंट में वेरिएबल के रूप में पास किया जाता है। यह वह जगह है जहां आयत में HTML कोड को प्रत्येक गतिविधि के साथ अद्यतन करने के लिए हेरफेर किया जाता है। यह प्रदर्शित करने के लिए एक बढ़िया प्रभाव है कि आप सरल jQuery ईवेंट का उपयोग करके किसी प्रक्रिया को कैसे नियंत्रित कर सकते हैं।

दूसरे फ़ंक्शन में हम z-इंडेक्स और अपारदर्शिता पैरामीटर का उपयोग करते हैं। क्या आप अन्य सीएसएस गुण जोड़ सकते हैं? लेकिन इसके लिए जावास्क्रिप्ट कोड पर दोबारा काम करना होगा ताकि सेटिंग्स की जांच की जा सके। उदाहरण के लिए, आप एक गतिशील आयत की ऊंचाई और चौड़ाई के लिए एक अलग फ़ॉन्ट शैली या मान पास कर सकते हैं - एक बहुत ही दिलचस्प ट्रिक!

निष्कर्ष

थोड़े से काम के साथ, अब हमारे पास एक बेहतरीन ड्रैग-एंड-ड्रॉप इंटरफ़ेस है। jQuery उन डेवलपर्स के लिए बहुत बड़ा लाभ प्रदान करता है जो अपनी परियोजनाओं में पुराने तरीकों का उपयोग करने के लिए उत्सुक हैं।

परिणामस्वरूप, हमारे पास न केवल इवेंट हैंडलर फ़ंक्शन हैं, बल्कि हम ड्रैग करने योग्य ब्लॉकों में नए वेरिएबल भी पास कर सकते हैं। इससे रचनात्मकता की नई संभावनाएं खुलती हैं। पाठ के प्रदर्शन में केवल एक स्केच शामिल है कि ऐसे कोड का उपयोग करके क्या किया जा सकता है।

इसलिए लाइब्रेरी फ़ंक्शंस का उपयोग करने के लिए jQuery दस्तावेज़ देखें।

क्या लेना है और कहां रखना है, यह लिखने की तुलना में कुछ लेना और उसे रख देना आसान है। बेशक, माउस या इसी तरह के उपकरण के बिना, आप कुछ भी नहीं चुन सकते हैं या कुछ भी निर्दिष्ट नहीं कर सकते हैं, लेकिन वर्तमान स्थिति में भी, "खींचें और छोड़ें" विचार का उपयोग करना बहुत स्वाभाविक और आरामदायक है।

विचार का दायरा केवल ऑनलाइन स्टोर, इलेक्ट्रॉनिक लाइब्रेरी, सर्च इंजन आदि से दूर है जानकारी के सिस्टम, और लागू क्षेत्र भी। यह विचार वेबसाइटों और उनके तत्वों के विकास में बहुत लागू होता है, प्रोग्रामर की भागीदारी के बिना, इंटरैक्टिव तरीके से बनाया और बनाए रखा जाता है।

विचार का विवरण

चुनें, स्थानांतरित करें और स्थान चुनें - यह विचार स्वाभाविक और सुविधाजनक है। यह बस आश्चर्य की बात है कि इसका जन्म तब नहीं हुआ जब माउस एक अनिवार्य कंप्यूटर सहायक उपकरण बन गया।

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

एक डेवलपर के लिए, "ड्रैग एंड ड्रॉप" का विचार टैग के निर्देशांक और आकार को मैन्युअल रूप से पुनर्गणना किए बिना पृष्ठ तत्वों में हेरफेर करना है, कई तत्वों का चयन करने और उन्हें संरेखित करने की क्षमता, साथ ही ब्लॉक टैग के किनारों को स्थानांतरित करना है।

टैग का वर्णन करने और उन्हें स्टाइल करने के लिए HTML और CSS उत्कृष्ट भाषाएं हैं, लेकिन जब किसी डेवलपर के पास निर्देशांक और आकारों को मैन्युअल रूप से पुनर्गणना किए बिना पृष्ठ तत्वों में इंटरैक्टिव रूप से हेरफेर करने की क्षमता होती है, तो यह काम को अधिक आरामदायक और कुशल बनाता है।

आसान फ़ाइल स्थानांतरण

"खींचें और छोड़ें": अंग्रेजी से रूसी में अनुवाद का शाब्दिक अर्थ "खींचें और छोड़ें" जैसा लगता है। व्यवहार में, यह बेहतर लगता है और बेहतर काम करता है: चुना, स्थानांतरित और जारी किया गया - सरल और प्राकृतिक।

किसी पृष्ठ से किसी पृष्ठ पर, किसी सर्वर पर, या अन्य उपयोग के लिए फ़ाइल स्थानांतरण को लागू करना बहुत सरल है।

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

जब माउस टोकरी के ऊपर था, तो विज़िटर ने बाईं माउस बटन को छोड़ दिया, "ड्रैग एंड ड्रॉप" इवेंट हुआ और साइट पेज (निचला चित्र) पर जावास्क्रिप्ट कोड विज़िटर द्वारा प्रदान की गई सभी फ़ाइलों को प्राप्त करने और संसाधित करने में सक्षम था। पेज (साइट) पर.

कार्यान्वयन विवरण

इस प्रक्रिया को निष्पादित करने वाला कोड बहुत सरल है. यहां तक ​​कि एक नौसिखिया डेवलपर भी इसे किसी भी उपयोग के मामले में दोहरा सकता है।

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

पेज का तर्क इस प्रकार है. जब कोई पृष्ठ ब्राउज़र में लोड किया जाता है, तो "ऑनड्रॉप" ईवेंट हैंडलर को बास्केट में असाइन किया जाता है - डाल दिया जाता है, अन्य ईवेंट अवरुद्ध हो जाते हैं और उपयोग नहीं किए जाते हैं।

पेज हमेशा की तरह काम करता है, लेकिन जैसे ही विज़िटर एक फ़ाइल (फ़ाइलें) का चयन करता है और उन्हें कार्ट छवि पर खींचता है, यानी, scPlaceFile टैग पर, "फ़ाइलें आ गई हैं" ईवेंट की प्रोसेसिंग शुरू हो जाएगी।

यह हैंडलर बस फाइलों की एक सूची प्रदर्शित करता है। उनकी संख्या इवेंट.डेटाट्रांसफर.फाइल्स.लेंथ में है, और प्रत्येक फ़ाइल के बारे में जानकारी इवेंट.डेटाट्रांसफर.फाइल्स[i].नाम में है। प्राप्त डेटा के साथ क्या करना है यह डेवलपर द्वारा निर्धारित किया जाता है; इस मामले में, प्राप्त फ़ाइलों की एक सूची बस तैयार की जाती है।

प्रसंस्करण के बाद, ईवेंट को अवरुद्ध कर दिया जाता है और प्रचारित नहीं किया जाता है। यह आवश्यक है ताकि ब्राउज़र शौकिया गतिविधियों में संलग्न न हो और प्राप्त जानकारी के प्रसंस्करण में हस्तक्षेप न करे।

डीएनडी और बाहरी डेटा

इस तकनीक का उपयोग करने में ड्रैग और ड्रॉप का उपयोग करके छवियों को सर्वर पर अपलोड करना एक आम बात है। आमतौर पर, डेवलपर एक फ़ाइल अपलोड फॉर्म (1) बनाता है जो सामान्य (2) की तरह काम करता है। विज़िटर फ़ाइलों का चयन कर सकता है और उन्हें हमेशा की तरह डाउनलोड कर सकता है।

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

यह अच्छा निर्णय. बेशक, यह स्वीकार करना बहुत मुश्किल है कि कंप्यूटर पर कोई माउस नहीं है। लेकिन यूजर इंटरफेस को सामान्य संस्करण और डीएनडी कार्यान्वयन में विकसित करना बेहतर है।

डीएनडी और आंतरिक डेटा

आगंतुकों के हितों का ख्याल रखना हमेशा महत्वपूर्ण होता है, लेकिन डेवलपर की चिंताएं भी मायने रखती हैं। आप न केवल "ड्रैग एंड ड्रॉप" लागू कर सकते हैं मानक साधन, लेकिन पृष्ठ तत्वों पर माउस घटनाओं को संसाधित करके भी।

टैग समन्वय मानों और उनके आकारों की गणना करने का कार्य लगातार उठता रहता है। मैन्युअल गणना एक अच्छा अभ्यास है, लेकिन इंटरैक्टिव विकल्प अधिक सुविधाजनक है। सभी टैग में हमेशा एक आयताकार आकार होता है और, तत्वों के किनारों पर "माउस" घटनाओं को ट्रैक करके, आप स्वचालित रूप से तत्वों को पृष्ठ पर वांछित स्थान पर ले जाने या उन्हें बदलने की क्षमता बना सकते हैं।

माउस क्लिक इवेंट को संभालना - क्लिक स्थान के निर्देशांक को याद रखना, उदाहरण के लिए, तत्व के पक्षों में से एक। माउस को हिलाने से - पक्ष वांछित दिशा में चला जाता है। माउस बटन को छोड़ना - पक्ष रुक जाता है और इसके निर्देशांक बदल जाते हैं। इस तरह आप तत्व की स्थिति या उसका आकार बदल सकते हैं।

औपचारिक रूप से, यह "खींचें और छोड़ें" नहीं है, लेकिन प्रभाव समान और व्यावहारिक है। किसी भी पेज तत्व के लिए सार्वभौमिक हैंडलर बनाकर, आप एक अच्छा इंटरैक्टिव परिणाम प्राप्त कर सकते हैं, विकास में तेजी ला सकते हैं और कोड को सरल बना सकते हैं।

दृश्य और मैनुअल प्रोग्रामिंग

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

यह सब मिलकर पृष्ठों के निर्माण को और अधिक कठिन बना देते हैं, लेकिन "ड्रैग एंड ड्रॉप" के विचार को उसके मानक रूप में लागू करके, इसकी घटनाओं का उपयोग करके, इस विचार को तत्वों पर सामान्य घटनाओं के साथ जोड़कर, एक तंत्र को लागू करना संभव है कौन सा पेज निर्माण दृश्य रूप से होगा।

अब आइए एक तत्व या एलिमेंट्स के चयन पर नजर डालें। चयन का तथ्य एक संदर्भ मेनू की उपस्थिति है, उदाहरण के लिए, लक्ष्य चयनित (बाएं, दाएं, केंद्र) को संरेखित करना है, या तत्वों को एक ही चरण में लंबवत या क्षैतिज रूप से वितरित करना है, या उनके आकार को बदलना है (न्यूनतम, अधिकतम) .

निर्देशांक और आयामों की स्वचालित पुनर्गणना मैन्युअल पुनर्गणना के लिए बेहतर है। कम गलतियाँ का मतलब है कि लक्ष्य तेजी से हासिल किया गया है। इसके अलावा, आप तत्वों की स्थिति और आकार को सहेजते हुए एक ब्राउज़र में एक पेज बना सकते हैं। अपने स्मार्टफोन पर इस पृष्ठ को खोलकर, आप निर्देशांक और आयामों को सही कर सकते हैं और उन्हें एक विशिष्ट स्मार्टफोन मॉडल या ब्राउज़र संस्करण के लिए याद रख सकते हैं।

तो क्रॉस-ब्राउज़र आवश्यकता का मैन्युअल रूप से अनुपालन किए बिना एक ही पृष्ठ पर अलग-अलग डेटा प्रदर्शित होगा विभिन्न उपकरणऔर विभिन्न ब्राउज़रों में।

विज़िटर को इन प्रक्रियाओं को स्वतंत्र रूप से पूरा करने की अनुमति देकर, और डेवलपर द्वारा प्रदान किए गए तत्वों में से आवश्यक पृष्ठ तत्वों का चयन करने की अनुमति देकर, उपयोगकर्ता की राय को ध्यान में रखते हुए, क्रॉस-ब्राउज़र संगतता और पृष्ठ की आवश्यक कार्यक्षमता सुनिश्चित करना संभव है।

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

वस्तुओं की गति के दौरान घटित होने वाली घटनाओं को उनके घटित होने के क्रम में नीचे सूचीबद्ध किया गया है।

ऑनस्टार्टड्रैग(TStartDragEvent टाइप करें) - ऑपरेशन की शुरुआत में, स्रोत ऑब्जेक्ट द्वारा उत्पन्न। पैरामीटर जो इवेंट हैंडलर को पास किए जाते हैं: DragObject रिसीवर ऑब्जेक्ट (TDragObject प्रकार), सोर्स ऑब्जेक्ट (TObject प्रकार)।

ऑनड्रैगओवर(TDragOverEvent टाइप करें) - जब खींची गई वस्तु इसके ऊपर होती है तो एक रिसीवर ऑब्जेक्ट बनाता है। पैरामीटर जो ईवेंट हैंडलर को पास किए जाते हैं: रिसीवर ऑब्जेक्ट प्रेषक (प्रकार TObject), स्रोत ऑब्जेक्ट स्रोत (प्रकार TObject), मूवमेंट स्टेट स्टेट (प्रकार TDragState), X और Y (पूर्णांक प्रकार) - माउस पॉइंटर के वर्तमान निर्देशांक, स्वीकार करें ( टाइप बूलियन ) मूव ऑपरेशन की पुष्टि का संकेत। गति की स्थिति यह स्पष्ट करती है कि जिस वस्तु को ले जाया जा रहा है वह रिसीवर क्षेत्र में है, उसमें घूम रही है, या उसे छोड़ चुकी है। पारित पैरामीटर गंतव्य ऑब्जेक्ट को स्रोत ऑब्जेक्ट को स्वीकार या अस्वीकार करने में सक्षम बनाते हैं। यदि मूव ऑपरेशन स्वीकार किया जाता है तो एक्सेप्ट पैरामीटर ट्राई पर सेट होता है, अन्यथा यह गलत पर सेट होता है।

ऑनड्रैगड्रॉप (प्रकार TDragDropEvent) - जब खींची गई वस्तु को उस पर गिराया जाता है तो रिसीवर ऑब्जेक्ट द्वारा उत्पन्न होता है। ईवेंट हैंडलर को माउस पॉइंटर, प्रेषक रिसीवर ऑब्जेक्ट (TObject प्रकार), और मूल आंदोलन ऑब्जेक्ट स्रोत (TObject प्रकार) के वर्तमान निर्देशांक पारित किए जाते हैं।

onEndDrag (EndDragEvent प्रकार) - ड्रैग ऑपरेशन पूरा होने पर उठाया जाता है। एक्स और वाई उस बिंदु के निर्देशांक हैं जहां स्रोत प्रेषक ऑब्जेक्ट और रिसीवर लक्ष्य ऑब्जेक्ट को इवेंट हैंडलर को पास किया जाता है।

ड्रैग और ड्रॉप बनाने के लिए, दो घटनाओं को लागू करना पर्याप्त है: ऑनड्रैगड्रॉप और ऑनड्रैगओवर, ड्रैगमोड प्रॉपर्टी के साथ dmAutomatic पर सेट। अन्यथा, ड्रैग ऑपरेशन की शुरुआत, बिगिनड्रैग विधि को प्रोग्रामर द्वारा कोडित किया जाना चाहिए।

सामग्री को समेकित करने के लिए, हम निम्नलिखित एप्लिकेशन बनाएंगे। पैनल घटक को प्रपत्र पर रखें. ऑब्जेक्ट इंस्पेक्टर की ड्रैगमोड प्रॉपर्टी को dmAutomatic पर सेट करें। आइए प्रपत्र ऑब्जेक्ट का चयन करें और निम्नलिखित ईवेंट बनाने के लिए ऑब्जेक्ट इंस्पेक्टर का उपयोग करें:

प्रक्रिया TForm1.FormDragOver (प्रेषक, स्रोत: TObject; X, Y: पूर्णांक; राज्य: TDragState; var स्वीकार करें: बूलियन); प्रारंभ करें यदि स्रोत = पैनल1 तो स्वीकार करें:= सत्य अन्यथा स्वीकार करें:= गलत; अंत; प्रक्रिया TForm1.FormDragDrop (प्रेषक, स्रोत: TObject; X, Y: पूर्णांक); प्रारंभ पैनल1.बाएं:= X; पैनल1.शीर्ष:= वाई; अंत;

अब एप्लिकेशन लॉन्च करके और पैनल के ऊपर माउस बटन पर क्लिक करके, हम पैनल ऑब्जेक्ट को पूरे फॉर्म में ले जा सकते हैं।

निचली पंक्ति: हम प्रौद्योगिकी से परिचित हो गए खींचें और छोड़ें(खींचें और छोड़ें) और इसे व्यवहार में प्रयोग किया।