HTML ड्रैग एंड ड्रॉप एपीआई का उपयोग कैसे करें

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

HTML में ड्रैग और ड्रॉप की मूल बातें

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

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

<divdraggable="true">This element is draggablediv>

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

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

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

उपरोक्त कोड ब्लॉक में, setDragImage विधि के तीन पैरामीटर हैं। पहला पैरामीटर छवि को संदर्भित करता है। अन्य पैरामीटर क्रमशः छवि के क्षैतिज और ऊर्ध्वाधर ऑफसेट का प्रतिनिधित्व करते हैं। जब आप ब्राउज़र में कोड चलाते हैं और किसी तत्व को खींचना शुरू करते हैं, तो आप देखेंगे कि कस्टम ड्रैग छवि को पहले सेट की गई कस्टम छवि से बदल दिया गया है।

यदि आप गिरावट की अनुमति देना चाहते हैं, तो आपको दोनों को रद्द करके डिफ़ॉल्ट व्यवहार को रोकना होगा ड्रैगेंटर और पर खींचे घटनाएँ, इस प्रकार:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

ड्रैगइवेंट इंटरफ़ेस को समझना

जावास्क्रिप्ट में एक विशेषता है ड्रैगइवेंट इंटरफ़ेस जो उपयोगकर्ता से ड्रैग-एंड-ड्रॉप इंटरैक्शन का प्रतिनिधित्व करता है। नीचे संभावित ईवेंट प्रकारों की एक सूची दी गई है ड्रैगइवेंट इंटरफेस।

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

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

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

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

उपरोक्त कोड ब्लॉक में, कस्टमड्रैगस्टार्टइवेंट का एक उदाहरण प्रस्तुत करता है ड्रैगइवेंट(). में कस्टमड्रैगस्टार्टइवेंट, दो कंस्ट्रक्टर तर्क हैं। पहला ड्रैग इवेंट प्रकार को दर्शाता है, जो पहले बताए गए सात इवेंट प्रकारों में से एक हो सकता है।

दूसरा तर्क a वाली वस्तु है डेटा स्थानांतरण कुंजी एक उदाहरण का प्रतिनिधित्व करती है डेटा स्थानांतरण, जिसके बारे में आप इस गाइड में बाद में और अधिक जानेंगे। इसके बाद, उस तत्व को पकड़ें जिससे आप ईवेंट को ट्रिगर करना चाहते हैं दस्तावेज़ ऑब्जेक्ट मॉडल (DOM).

const draggableElement = document.querySelector("#draggable");

फिर जोड़ें, इवेंट श्रोता इस तरह:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

उपरोक्त पहले इवेंट श्रोता में, कॉलबैक फ़ंक्शन सुविधा टेक्स्ट को लॉग करती है, "ड्रैग प्रारंभ हुआ!" और आह्वान करता है सेटडेटा पर विधि डेटा स्थानांतरण संपत्ति पर आयोजन वस्तु। अब, आप इस तरह से कस्टम ईवेंट ट्रिगर कर सकते हैं:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

डेटा ट्रांसफर के साथ डेटा ट्रांसफर करना

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

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

डेटा पैकेज करने के लिए setData() का उपयोग करना

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

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

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

GetData() के साथ डेटा पुनर्प्राप्त करना

प्राप्त अंत पर, ड्रॉप करने योग्य तत्व के ईवेंट श्रोता के भीतर, आप इसका उपयोग करके स्थानांतरित डेटा को पुनः प्राप्त कर सकते हैं डेटा प्राप्त करें() तरीका:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

उपरोक्त कोड ब्लॉक उसी डेटा प्रकार के साथ डेटा पुनर्प्राप्त करता है (पाठ/सादा) का उपयोग करके सेट किया गया था सेटडेटा() विधि पहले. यह आपको ड्रॉपएबल तत्व के संदर्भ में आवश्यकतानुसार स्थानांतरित डेटा तक पहुंचने और हेरफेर करने की अनुमति देता है।

ड्रैग एंड ड्रॉप इंटरफेस के लिए केस का उपयोग करें

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

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

पहुंच को ध्यान में रखते हुए

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