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

HTML ड्रैग और ड्रॉप

HTML ड्रैग और ड्रॉप एक शक्तिशाली विशेषता है जो उपयोगकर्ताओं को वेबपेज के तत्वों को खींचने और एक स्थान से दूसरे स्थान पर गिराने (ड्रॉप करने) की अनुमति देती है। यह HTML5 द्वारा समर्थित एक मूलभूत इंटरफ़ेस है जो इंटरैक्टिव यूजर अनुभव तैयार करने में मदद करता है।
जैसे एक लाइब्रेरी में किताबें व्यवस्थित करना होता है, वैसे ही वेबसाइट में कंटेंट या आइटम्स को ड्रैग और ड्रॉप के ज़रिए पुनः व्यवस्थित किया जा सकता है। चाहे आप एक पोर्टफोलियो वेबसाइट पर प्रोजेक्ट्स की प्राथमिकता बदलना चाहते हों, ब्लॉग पोस्ट्स को श्रेणियों में डालना चाहते हों, ई-कॉमर्स वेबसाइट पर प्रोडक्ट्स को फिल्टर करना चाहते हों, न्यूज़ साइट पर आर्टिकल्स की ऑर्डर बदलनी हो या सोशल प्लेटफॉर्म पर यूज़र प्रोफाइल को पर्सनलाइज़ करना हो — HTML ड्रैग और ड्रॉप बेहद उपयोगी साबित होता है।
इस रेफरेंस गाइड में, आप सीखेंगे कि HTML ड्रैग और ड्रॉप कैसे काम करता है, आवश्यक एट्रिब्यूट्स और इवेंट्स क्या हैं, और इसे व्यावहारिक उदाहरणों में कैसे लागू किया जा सकता है। आप यह भी जानेंगे कि सामान्य त्रुटियों से कैसे बचें और कैसे एक सुलभ (accessible) तथा मानक-अनुरूप (standards-compliant) अनुभव तैयार करें।

मूल उदाहरण

html
HTML Code 
<!-- Basic drag and drop in HTML -->
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:200px;height:150px;border:2px dashed #333;">
यहाँ छोड़ें
</div>

<img id="dragItem" src="https://via.placeholder.com/100" draggable="true" ondragstart="drag(event)">

<script>
function allowDrop(ev) {
ev.preventDefault(); // Allow drop by preventing default behavior
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id); // Set dragged element ID
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text"); // Get dragged element ID
ev.target.appendChild(document.getElementById(data)); // Move element
}
</script>

ऊपर दिए गए उदाहरण में HTML ड्रैग और ड्रॉप का मूल ढांचा प्रस्तुत किया गया है। इसमें दो मुख्य भाग हैं: एक ड्रैग करने योग्य तत्व (<img>) और एक ड्रॉप ज़ोन (<div>)।
सबसे पहले, <img> टैग में draggable="true" सेट किया गया है, जो ब्राउज़र को बताता है कि यह आइटम ड्रैग किया जा सकता है। इसके साथ ondragstart इवेंट है जो ड्रैग की शुरुआत पर drag() फ़ंक्शन कॉल करता है। इस फ़ंक्शन में dataTransfer.setData() का प्रयोग कर ड्रैग किए जा रहे एलिमेंट की ID को संग्रहित किया जाता है।
दूसरी ओर, <div> ड्रॉप ज़ोन है। इसमें दो इवेंट्स हैं — ondragover और ondrop। ondragover के अंदर preventDefault() ज़रूरी है, वरना ब्राउज़र ड्रॉप की अनुमति नहीं देता। ondrop इवेंट में drop() फंक्शन को कॉल किया जाता है, जो ID को प्राप्त कर उस एलिमेंट को ड्रॉप ज़ोन के अंदर ले आता है।
यह कोड सीधे चलने योग्य और स्वतंत्र है। यह मूल ढांचा पोर्टफोलियो साइट पर प्रोजेक्ट्स को पुनः व्यवस्थित करने, ब्लॉग पोस्ट्स को श्रेणियों में डालने या न्यूज़ साइट पर हेडलाइनों को ड्रैग करने के लिए आधार प्रदान करता है।
अक्सर शुरुआती उपयोगकर्ता पूछते हैं कि "ड्रॉप क्यों नहीं हो रहा?" — इसका उत्तर आमतौर पर ondragover में preventDefault() की कमी या draggable एट्रिब्यूट के बिना ड्रैग की कोशिश करना होता है।

व्यावहारिक उदाहरण

html
HTML Code 
<!-- Portfolio प्रोजेक्ट्स को पुनः व्यवस्थित करना -->
<ul id="projectList" ondrop="drop(event)" ondragover="allowDrop(event)">
<li id="proj1" draggable="true" ondragstart="drag(event)">प्रोजेक्ट A</li>
<li id="proj2" draggable="true" ondragstart="drag(event)">प्रोजेक्ट B</li>
</ul>

<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
let id = ev.dataTransfer.getData("text");
let dragged = document.getElementById(id);
ev.target.closest('ul').insertBefore(dragged, ev.target);
}
</script>

सर्वोत्तम अभ्यास और सामान्य गलतियाँ:
HTML ड्रैग और ड्रॉप को लागू करते समय कुछ सर्वोत्तम अभ्यासों का पालन करना आवश्यक है:

  1. Semantic HTML का उपयोग करें: <ul> और <li> जैसे अर्थपूर्ण टैग्स का प्रयोग करें ताकि DOM संरचना स्पष्ट और मान्य हो।
  2. Accessibility (पहुँचयोग्यता) सुनिश्चित करें: aria-grabbed, aria-dropeffect जैसे ARIA एट्रिब्यूट्स और कीबोर्ड इंटरैक्शन को सक्षम करना ज़रूरी है ताकि असक्षम उपयोगकर्ता भी सुविधा से नेविगेट कर सकें।

  3. साफ-सुथरा मार्कअप: IDs अद्वितीय और स्पष्ट होने चाहिए, और HTML टेम्पलेट में अनावश्यक नेस्टिंग से बचना चाहिए।
    आम गलतियाँ जिनसे बचना चाहिए:

  4. draggable="true" न देना – इससे एलिमेंट ड्रैग ही नहीं होगा।

  5. ondragover में preventDefault() भूल जाना – इससे ड्रॉप कभी सफल नहीं होगा।
  6. DOM में एलिमेंट को गलत तरीके से नेस्ट करना – उदाहरण: <ul> के अंदर <div> डालना।
  7. एक ही ID को दो बार उपयोग करना – यह ब्राउज़र व्यवहार को भ्रमित करता है।
    डिबगिंग टिप्स:
  • console.log() का उपयोग हर इवेंट फंक्शन के अंदर करें ताकि पता चल सके कि कौन सी स्टेप सफल हो रही है।
  • ब्राउज़र के डिवेलपर टूल्स में dataTransfer ऑब्जेक्ट की जांच करें।
    प्रायोगिक सुझाव:
    ड्रैगेबल एलिमेंट्स के लिए कर्सर संकेत और विजुअल हाइलाइट्स (CSS के ज़रिए) जोड़ें ताकि उपयोगकर्ता को इंटरएक्शन का स्पष्ट अनुभव मिल सके।

📊 त्वरित संदर्भ

Property/Method Description Example
draggable एलिमेंट को ड्रैग योग्य बनाता है <div draggable="true">
ondragstart ड्रैग की शुरुआत पर कॉल होता है ondragstart="drag(event)"
ondragover ड्रॉप को अनुमति देने के लिए आवश्यक ondragover="allowDrop(event)"
ondrop जब कोई एलिमेंट छोड़ा जाता है तब कॉल होता है ondrop="drop(event)"
dataTransfer.setData() ड्रैग किए गए डेटा को सेट करता है ev.dataTransfer.setData("text", id)
dataTransfer.getData() ड्रॉप पर डेटा को प्राप्त करता है ev.dataTransfer.getData("text")

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

  • JavaScript के माध्यम से ड्रैग की अनुमति और रोकथाम
  • Touch और Mobile सपोर्ट
  • ARIA Roles और accessibility testing
  • एक्सटर्नल लाइब्रेरी जैसे Sortable.js और Draggable.js
    सुझाव: छोटे प्रोजेक्ट्स से शुरू करें — एक गैलरी, एक ब्लॉग कैटेगोरी ड्रैगर या एक कस्टम न्यूज़ हेडलाइन ऑर्डरिंग। अभ्यास से ही पूर्ण ज्ञान प्राप्त होता है।

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

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

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

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

❓
3
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

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