🈂️ 🛬 🌝 DRAG और DROP प्रभाव बनाने की विधि ⚖️ 🖍️ ☢️

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

लेख में दो भाग होंगे:

DRAG और DROP प्रभाव बनाने की विधि।
DRAG और DROP का उपयोग करके छँटाई बनाने के लिए प्राप्त ज्ञान का व्यावहारिक अनुप्रयोग

अनुच्छेद संख्या 1 DRAG और DROP प्रभाव बनाने की विधि

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

मैं एक आरक्षण बनाना चाहता हूं कि इस प्रभाव को बनाने के लिए कई तरीके हैं और सभी के बारे में पढ़ना सुनिश्चित करें। मैं उस एक का लाभ उठाऊंगा जिसे मैं वर्तमान में सबसे सुविधाजनक मानता हूं।

DRAG और DROP बनाते समय, पहला कदम उस ऑब्जेक्ट को सेट करना है जिसे हम draggable = 'true' पर ले जाएंगे।

<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>

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

ड्रैगस्टार्ट - तब होता है जब उपयोगकर्ता किसी आइटम को खींचने लगता है।
खींचें - तब होता है जब किसी आइटम को खींचा जा रहा हो।
ड्रैगेंड - तब होता है जब उपयोगकर्ता ने आइटम को खींचना समाप्त कर दिया है।
ड्रैगेंटर - तब होता है जब खींचा गया आइटम लक्ष्य को हिट करता है।
ड्रैगलीव - तब होता है जब खींची गई वस्तु लक्ष्य को छोड़ देती है।
ड्रैगओवर - तब होता है जब खींची गई वस्तु लक्ष्य से ऊपर होती है।
ड्रॉप - तब होता है जब आइटम को खींचा जा रहा है लक्ष्य पर पड़ता है।

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

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

 <html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;//     X startCursorY = event.pageY;//     Y startX = d1.style.marginLeft.replace('px','')*1; //      PX startY = d1.style.marginTop.replace('px','')*1; }); d1.addEventListener('dragend',function() { d1.style.position = 'absolute';//CSS   "" :) d1.style.marginLeft = startX + event.pageX-startCursorX; //  +   -      d1.style.marginTop = startY + event.pageY-startCursorY; //       ,     }); </script> </body> </html>

निस्संदेह, उदाहरण घुटने पर किया जाता है, लेकिन यह प्राप्त वस्तु की वैकल्पिकता को पूरी तरह दिखाता है।

मैं कुछ भी नहीं के लिए अलग-अलग घटनाओं के साथ उदाहरणों पर विचार करता हूं, क्योंकि यदि लाइन d1.addventventListener ('ड्रैगस्टार्ट', फंक्शन () { आप किसी अन्य ईवेंट के साथ 'ड्रैगस्टार्ट' की जगह लेते हैं, तो आप इसके साथ खेल सकते हैं और दिलचस्प परिणाम प्राप्त कर सकते हैं। , कुछ ऐसा करें जो आपको टिप्पणियों में असामान्य और दिलचस्प लगे, इसलिए हर कोई बहुत कुछ सीखता है और खुद को दोहरा सकता है।

परिच्छेद संख्या २। DROP DRAG और DROP में काम नहीं करता है

जब आप सभी घटनाओं का प्रयास करते हैं, तो आप पाएंगे कि ड्रॉप काम नहीं करता है। यह इस पद्धति के डेवलपर्स हैं, जो उन लोगों को परमाणु बनाते हैं जिन्होंने "और यह तय किया है ... हुह, बकवास।"

खैर, सब कुछ सरल है, ड्रॉप इवेंट से पहले, आपको उसी तत्व पर एक ईवेंट को लटका देना होगा

 d2.addEventListener('dragover',function() { event.preventDefault(); });

इसे एक तथ्य के रूप में लें, यह इसके बिना काम नहीं करेगा।

DRAG और DROP प्रभाव बनाने की विधि

अनुच्छेद संख्या 1 DRAG और DROP प्रभाव बनाने की विधि

परिच्छेद संख्या २। DROP DRAG और DROP में काम नहीं करता है

More articles: