HTML Academy · पाठ

draggable एट्रिब्यूट और dragstart इवेंट

एलिमेंट को खींचने योग्य बनाएँ और dragstart पर प्रतिक्रिया दें

पाठ 1, कुल 4 में से13 चरण

draggable एट्रिब्यूट और dragstart इवेंट, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

खींचने योग्य एट्रिब्यूट

जब आप draggable="true" सेट करते हैं, तो कोई भी तत्व खींचने का स्रोत बन जाता है। लिंक और चित्र डिफ़ॉल्ट रूप से खींचे जा सकते हैं; बाकी सभी तत्वों (div, li, span) के लिए यह एट्रिब्यूट स्पष्ट रूप से देना पड़ता है। draggable="false" किसी तत्व को मूल खींचने की सुविधा से बाहर कर देता है।

<div draggable="true" id="card">Drag me</div>

खींचना-आरंभ घटना

जब उपयोगकर्ता खींचना शुरू करता है, तो स्रोत तत्व dragstart सक्रिय करता है। यहीं से खींचने की प्रक्रिया शुरू करें: कौन-सा आइटम स्थानांतरित हो रहा है, यह दर्ज करें; आवश्यकता हो तो उसका रूप बदलें; और dataTransfer ऑब्जेक्ट में वह डेटा लिखें जिसे ड्रॉप लक्ष्य पढ़ेगा।

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

खींचना-आरंभ के बिना कुछ नहीं होता

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

effectAllowed सेट करना

e.dataTransfer.effectAllowed = "move" को खींचना-आरंभ में सेट करने से प्रक्रिया सीमित हो जाती है: "copy", "move", "link", "copyMove", "all" या "none"। इससे ब्राउज़र द्वारा दिखाया जाने वाला कर्सर तय होता है और वह dropEffect भी तय होता है जिसे लक्ष्य बाद में सेट कर सकता है।

दृश्य संकेत जोड़ना

स्रोत में एक CSS वर्ग जोड़ें, ताकि खींचते समय वह धुंधला दिखाई दे: card.classList.add("dragging")। dragend घटना में यह वर्ग हटा दें, ताकि ड्रॉप सफल होने या Escape से रद्द होने—दोनों स्थितियों में शैली हट जाए।

कस्टम खींच-चित्र

डिफ़ॉल्ट रूप से ब्राउज़र स्रोत का पारदर्शी चित्र खींचता है। इसे e.dataTransfer.setDragImage(node, offsetX, offsetY) से बदलें — कर्सर पर कस्टम पूर्वावलोकन दिखाने के लिए छिपा हुआ DOM तत्व या कोई चित्र दें।

const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

खींचना-समाप्ति घटना

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

रद्दीकरण पहचानना

खींचना-समाप्ति के भीतर e.dataTransfer.dropEffect जाँचें। यदि मान "none" है, तो ड्रॉप नहीं हुआ (लक्ष्य ने अस्वीकार किया, उपयोगकर्ता ने Escape दबाया या पृष्ठ के बाहर ड्रॉप किया)। अन्यथा इसमें ड्रॉप लक्ष्य द्वारा चुना गया प्रभाव ("move", "copy", "link") होता है।

स्पर्श उपकरणों पर खींचना

मूल खींचना और छोड़ना डेस्कटॉप-केंद्रित है। स्पर्श उपकरणों पर पॉलीफ़िल या Pointer Events-आधारित विकल्प के बिना यह API लगभग काम नहीं करती। मोबाइल-अनुकूल क्रम बदलने वाले उपयोगकर्ता इंटरफ़ेस के लिए SortableJS या डीएनडी-किट जैसी पुस्तकालयों को प्राथमिकता दें, जो दोनों घटना प्रणालियों के बीच का अंतर छिपाती हैं।

सुगम्यता संबंधी चिंताएँ

मूल खींचना और छोड़ना कीबोर्ड से सुलभ नहीं है — केवल कीबोर्ड का उपयोग करने वाले लोग आइटमों का क्रम नहीं बदल सकते। हमेशा कोई विकल्प दें: तीर-कुंजी प्रक्रमक, ऊपर ले जाएँ/नीचे ले जाएँ बटन या सहायक-तकनीक द्वारा नियंत्रित क्रम-बदलाव संवाद। खींचना और छोड़ना सुविधा बढ़ाए, उसका विकल्प न बने।

ब्राउज़र के डिफ़ॉल्ट व्यवहार को बंद करना

खींचे जा सकने वाले तत्वों के भीतर पाठ चुनना खींचने की प्रक्रिया में बाधा डाल सकता है। स्रोत पर CSS user-select: none और -webkit-user-drag: element लागू करें, ताकि ब्राउज़र भीतर का पाठ चुनने के बजाय तत्व को खींचे।

ज्ञान-जाँच

हालाँकि draggable="true" एट्रिब्यूट अकेले ही किसी तत्व को खींचने योग्य बना देता है, फिर भी सामान्यतः आपको खींचना-आरंभ प्रक्रमक क्यों लगाना पड़ता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

स्रोतों को draggable="true" से चिह्नित करें और dataTransfer भरने, effectAllowed सेट करने तथा आवश्यकता पड़ने पर कस्टम खींच-चित्र देने के लिए खींचना-आरंभ का उपयोग करें। शैलियों की सफ़ाई के लिए इसे खींचना-समाप्ति के साथ जोड़ें। सुगम्यता के लिए कीबोर्ड विकल्प दें और स्पर्श उपकरणों के लिए पॉलीफ़िल पर विचार करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “draggable एट्रिब्यूट और dragstart इवेंट” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “draggable एट्रिब्यूट और dragstart इवेंट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“draggable एट्रिब्यूट और dragstart इवेंट” में मैं क्या सीखूँगा?

एलिमेंट को खींचने योग्य बनाएँ और dragstart पर प्रतिक्रिया दें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“draggable एट्रिब्यूट और dragstart इवेंट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ