HTML Drag and Drop
In this page:
<tagname draggable="true" ondragstart="handler(event)">Drag me</tagname>
<tagname ondrop="drop(event)" ondragover="event.preventDefault()">Drop zone</tagname>Drag and Drop को समझना
HTML Drag and Drop इंटरैक्शन्स को मैनेज करने के लिए स्टैंडर्ड ब्राउज़र इवेंट्स का उपयोग करता है। एलिमेंट्स को draggable बनाया जा सकता है, ड्रॉप टार्गेट्स को ड्रॉप स्वीकार करने के लिए कॉन्फ़िगर किया जाता है, और डेटा को सुरक्षित रूप से उनके बीच ट्रांसफर किया जाता है।
उदाहरण: Understanding Drag and Drop
<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'item1')">Drag me</div>
<div ondrop="event.preventDefault()" ondragover="event.preventDefault()">Drop here</div>एलिमेंट्स को Draggable बनाना
किसी भी एलिमेंट को draggable बनाने के लिए, आप उसके ओपनिंग टैग में draggable="true" एट्रिब्यूट जोड़ते हैं और यह बताने के लिए कि कौन-सा डेटा ट्रांसफर होना चाहिए, ondragstart इवेंट लिसनर बाइंड करते हैं।
इस एट्रिब्यूट के बिना एलिमेंट सिर्फ सिलेक्टेबल टेक्स्ट या एक स्टैटिक इमेज ही रहता है, और उसे ड्रैग करने से कुछ नहीं होता।
उदाहरण: Making Elements Draggable
<div id="item1" draggable="true" ondragstart="event.dataTransfer.setData('text', 'item1')">
Drag me
</div>ड्रॉप टार्गेट्स कॉन्फ़िगर करना
डिफ़ॉल्ट रूप से, ब्राउज़र वेबपेज लेआउट पर एलिमेंट्स ड्रॉप करने से रोकते हैं। किसी एलिमेंट को ड्रॉप टार्गेट बनाने के लिए, आपको ondragover इवेंट बाइंड करना होगा और ड्रॉप करने की अनुमति देने के लिए preventDefault कॉल करना होगा।
उदाहरण: Configuring Drop Targets
<div ondragover="event.preventDefault()" ondrop="event.preventDefault()">
Drop Zone
</div>DataTransfer से डेटा ट्रांसफर करना
DataTransfer ऑब्जेक्ट drag-and-drop प्रोसेस के दौरान डेटा एक्सचेंज को मैनेज करता है। यह आपको ड्रैग स्टार्ट पर वैल्यूज़ (जैसे टेक्स्ट, IDs, या URLs) सेव करने और ड्रॉप पर उन्हें वापस पाने देता है।
साधारण टेक्स्ट के लिए 'text/plain' और लिंक या फाइल रेफरेंस के लिए 'text/uri-list' जैसे कॉमन फॉर्मैट्स आमतौर पर इस्तेमाल होते हैं।
उदाहरण: Transferring Data with DataTransfer
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Hello')">Drag</div>
<div ondragover="event.preventDefault()" ondrop="console.log(event.dataTransfer.getData('text/plain'))">
Drop
</div>लोकल फाइल्स को ड्रॉप ज़ोन में ड्रैग करना
drag-and-drop का सबसे आम इस्तेमाल यह है कि यूज़र्स को अपने कंप्यूटर से फिज़िकल फाइल्स सीधे ड्रैग करके आपके वेब एप्लिकेशन में ड्रॉप कर अपलोड करने देना।
एक बार फाइल्स के ड्रॉप ज़ोन के इवेंट हैंडलर में पहुँच जाने के बाद, उन्हें पढ़ने के लिए FileReader API की ज़रूरत होती है।
उदाहरण: Dragging Local Files into Drop Zones
<div ondragover="event.preventDefault()" ondrop="console.log(event.dataTransfer.files)">
Drop files here
</div>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: