लोड हो रहा है...

HTML Drag and Drop

पहले Geolocation अनुमति के बाद निर्देशांक माँगता था। यह पाठ निर्देशांक छोड़कर HTML Drag and Drop पेश करता है: क्या खींचा जा सकता है चिह्नित करना, dataTransfer से छोटा पेलोड, और ड्रॉप पर निर्णय। दायरा व्यावहारिक — draggable, preventDefault, ले जाना या लेबल — sortable लाइब्रेरी या फाइल अपलोड ऐप नहीं।

HTML कोर्स में drag and drop क्यों

शुरुआती अक्सर कार्ड को बॉक्स में खींचना चाहते हैं। नेटिव DnD पहला आम API है। Geolocation के बाद विभाजन अलग है: HTML स्रोत चिह्नित करता है; JS इवेंट और ड्रॉप अर्थ का मालिक है।

सीधा उत्तर

1) draggable="true"। 2) dragstart में setData। 3) dragover पर preventDefault। 4) drop में getData और DOM/UI बदलें। 5) कोई विशेष dropzone टैग नहीं। 6) ज़रूरी हो तो बटन/कीबोर्ड पथ।

📊 dragstart vs dragover vs drop

Topic	dragstart	dragover	drop
Typical role	Start drag; set dataTransfer	Allow drop (preventDefault)	Apply the result
Runs on	Draggable source	Potential target (often)	Drop target
Must preventDefault?	Usually no	Yes — so drop can fire	Yes — avoid default navigation quirks
Beginner payload	setData("text/plain", id)	—	getData + move/label
This course depth	Required	Required	Required (simple move/label)

छोटा ज़ोन-में-ले-जाना डेमो

नीला बॉक्स draggable है; ड्रॉप पर ज़ोन में चला जाता है। dragover पर preventDefault के बिना drop अक्सर नहीं चलता।

Move a node into a drop zone

html

<div id="item" draggable="true" style="padding:8px;background:#cdf;width:120px;">Drag me</div>
<div id="zone" style="margin-top:12px;padding:24px;border:2px dashed #666;">Drop here</div>
<script>
const item = document.getElementById("item");
const zone = document.getElementById("zone");
item.addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", "item");
});
zone.addEventListener("dragover", function (e) {
e.preventDefault();
});
zone.addEventListener("drop", function (e) {
e.preventDefault();
zone.appendChild(item);
});
</script>

मूव कॉल पढ़ना

draggable जेस्चर शुरू करता है
dragstart में dataTransfer
dragover + preventDefault ड्रॉप अनुमति देता है
drop DOM बदलता है
Geolocation से अलग: कोई डिवाइस निर्देशांक नहीं
डेमो छोटा रखें

dataTransfer पेलोड डेमो

कभी उसी नोड को नहीं हिलाते — टेक्स्ट पेलोड ले जाते हैं और ड्रॉप पर दिखाते हैं जब कई स्रोत एक लक्ष्य साझा करें।

Drop shows dataTransfer text

html

<p id="a" draggable="true" style="display:inline-block;padding:6px;background:#fec;margin-right:8px;">Alpha</p>
<p id="b" draggable="true" style="display:inline-block;padding:6px;background:#cfe;margin-right:8px;">Beta</p>
<div id="tray" style="margin-top:12px;padding:16px;border:2px dashed #444;">Drop a label here</div>
<pre id="note"></pre>
<script>
const tray = document.getElementById("tray");
const note = document.getElementById("note");
function arm(id, label) {
document.getElementById(id).addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", label);
});
}
arm("a", "Alpha");
arm("b", "Beta");
tray.addEventListener("dragover", function (e) {
e.preventDefault();
});
tray.addEventListener("drop", function (e) {
e.preventDefault();
note.textContent = "Dropped: " + e.dataTransfer.getData("text/plain");
});
</script>

dataTransfer विचार पढ़ना

setData/getData छोटा स्ट्रिंग ले जाते हैं
text/plain शुरुआती-अनुकूल
कई स्रोत, एक लक्ष्य
फाइल अपलोड उत्पाद नहीं
Geolocation नहीं
अगला: web workers

DnD कब उपयोग करें

कार्ड को स्पष्ट ज़ोन में: अच्छा intro
बिना विकल्प महत्वपूर्ण क्रिया: बुरा
थीम सहेजना: Web Storage
GPS: Geolocation था
पूरा kanban: इस परिचय से परे

अभ्यास — खींचें, छोड़ें, लेबल करें

मूव डेमो आज़माएँ।
preventDefault हटाकर drop विफलता देखें।
dataTransfer डेमो आज़माएँ।
वैकल्पिक: बिना ड्रैग बटन।
वाक्य: Geolocation निर्देशांक पढ़ता है; DnD हिलाता/लेबल करता है।
असली ब्राउज़र विंडो बेहतर।
आगे: web workers।

आसान गलतियाँ

dragover पर preventDefault भूलना
केवल-DnD UI बिना विकल्प
dropzone टैग की उम्मीद
Geolocation से मिलाना
बटन की जगह DnD ज़्यादा इस्तेमाल
परिचय को पूरा sortable कोर्स मानना

सारांश

DnD: draggable, dataTransfer और तीन इवेंट
dragover पर preventDefault अक्सर ज़रूरी
HTML स्रोत चिह्नित करता है; स्क्रिप्ट ड्रॉप परिभाषित करती है
ज़रूरत हो तो बिना-ड्रैग पथ दें
Geolocation निर्देशांक थे; यह पाठ पॉइंटर से मूव/लेबल
अगला: web workers

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी