तत्वों को ड्रैग करने योग्य बनाना
ड्रैगिंग सक्षम कीजिए और ड्रैग इवेंट संभालिए।
तत्वों को ड्रैग करने योग्य बनाना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
HTML का खींचने और छोड़ने का एपीआई
मूल खींचने और छोड़ने का एपीआई उपयोगकर्ताओं को एलिमेंट पकड़कर उन्हें किसी दूसरी जगह छोड़ने देता है। यह घटना-आधारित है: स्रोत एलिमेंट खींचने से जुड़ी घटनाएँ सक्रिय करते हैं और छोड़ने के लक्ष्य अपनी घटनाएँ सक्रिय करते हैं। किसी लाइब्रेरी की आवश्यकता नहीं है।
draggable एट्रिब्यूट
डिफ़ॉल्ट रूप से केवल लिंक और चित्र खींचे जा सकते हैं। किसी भी एलिमेंट को खींचने योग्य बनाने के लिए draggable="true" जोड़ें।
<div draggable="true" id="card">Drag me</div>JS में draggable सेट करना
आप draggable प्रॉपर्टी के माध्यम से स्क्रिप्ट से इस व्यवहार को चालू या बंद कर सकते हैं।
const card = document.getElementById("card");
card.draggable = true;खींचना शुरू होने की घटना
dragstart खींचना शुरू होते ही सक्रिय होता है। यहीं आप दर्ज करते हैं कि क्या खींचा जा रहा है।
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});dataTransfer से डेटा ले जाना
घटना dataTransfer उपलब्ध कराती है। खींचने के साथ जाने वाला डेटा जोड़ने के लिए dragstart में setData(format, value) का उपयोग करें।
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});drag घटना
एलिमेंट के चलते रहने के दौरान drag लगातार सक्रिय होता है। इसका कम उपयोग करें — यह हर सेकंड कई बार सक्रिय हो सकता है।
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});खींचना समाप्त होने की घटना
उपयोगकर्ता एलिमेंट छोड़ता है तब dragend सक्रिय होता है, चाहे छोड़ना सफल हुआ हो या नहीं। स्रोत की शैली रीसेट करने के लिए इसका उपयोग करें।
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});स्रोत एलिमेंट को चिह्नित करना
एक सामान्य तरीका है: dragstart पर एक वर्ग जोड़ें और dragend पर उसे हटाएँ, ताकि खींची जा रही वस्तु को धुंधला या उभरा हुआ दिखाया जा सके।
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));अनुमत प्रभाव
मान्य कार्रवाइयों की घोषणा करने के लिए dragstart में effectAllowed सेट करें: "copy", "move", "link" या इनके संयोजन।
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});टच उपकरणों के लिए सावधानी
मोबाइल पर मूल एपीआई में टच का समर्थन सीमित है। टच-प्रथम ऐप के लिए Pointer Events या किसी समर्पित लाइब्रेरी पर विचार करें; मूल एपीआई डेस्कटॉप पर सबसे अच्छा काम करता है।
टेक्स्ट चयन बंद करना
खींचते समय अनजाने में टेक्स्ट चुना जा सकता है। CSS का एक छोटा नियम खींचने की प्रक्रिया को व्यवस्थित रखता है।
/* CSS */
.draggable { user-select: none; }त्वरित जाँच
खींचने की मूल बातों का परीक्षण करें।
पुनरावलोकन: एलिमेंट को खींचने योग्य बनाना
आपने draggable="true" से खींचने की सुविधा चालू की, dragstart/drag/dragend को संभाला, dataTransfer.setData से डेटा जोड़ा, effectAllowed सेट किया और स्रोत की शैली तय की। अगला विषय: छोड़ने के लक्ष्य।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “तत्वों को ड्रैग करने योग्य बनाना” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “तत्वों को ड्रैग करने योग्य बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“तत्वों को ड्रैग करने योग्य बनाना” में मैं क्या सीखूँगा?
ड्रैगिंग सक्षम कीजिए और ड्रैग इवेंट संभालिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“तत्वों को ड्रैग करने योग्य बनाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- तत्वों को ड्रैग करने योग्य बनाना
- ड्रॉप लक्ष्य और dataTransfer
- ड्रैग के दौरान दृश्य प्रतिक्रिया
- फ़ाइलों को पेज पर ड्रैग करना