در حال بارگذاری...

کشیدن و رها کردن در HTML

درس قبل، Geolocation بعد از اجازه عرض و طول می‌خواست. این درس مختصات را ترک می‌کند و کشیدن و رها کردن HTML را معرفی می‌کند: علامت‌زدن آنچه کشیده می‌شود، حمل بار کوچک با dataTransfer، و تصمیم برای drop روی هدف. HTML هنوز اسکریپت بار می‌کند؛ اسکریپت dragstart، dragover و drop را وصل می‌کند. دامنه عملی است — draggable، preventDefault روی dragover، جابه‌جایی یا برچسب روی drop — نه کتابخانهٔ sortable، اپ آپلود فایل، یا کورس کامل دسترس‌پذیری.

چرا drag and drop در کورس HTML

مبتدی اغلب دموی «کارت را به جعبه بکش» می‌خواهد. DnD بومی اولین API رایج برای آن ژست اشاره‌گر است. بعد از «JS یک fix مجاز می‌خواند» در geolocation، تقسیم اینجا فرق دارد: HTML آنچه کشیده می‌شود را علامت می‌زند؛ JS رویدادها و معنی drop را دارد. draggable="true"، dataTransfer در dragstart، preventDefault روی dragover، و handler آرام drop کافی است.

پاسخ مستقیم

۱) draggable="true" بگذارید. ۲) در dragstart با setData("text/plain", …) بار بگذارید. ۳) روی هدف در dragover حتماً preventDefault() — وگرنه drop ممکن است نیاید. ۴) در drop دوباره preventDefault، getData، سپس گره را جابه‌جا یا UI را به‌روز کنید. ۵) تگ ویژهٔ dropzone نیست — هر عنصری با listener می‌تواند هدف باشد. ۶) وقتی عمل مهم است مسیر دکمه/کیبورد هم بگذارید.

📊 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="true" است. روی drop در منطقهٔ خط‌چین، اسکریپت گره را به داخل منطقه می‌آورد. 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="true" به مرورگر می‌گوید عنصر می‌تواند کشیده شود
در dragstart معمولاً setData صدا می‌زنید
dragover + preventDefault() سیگنال کلاسیک «اینجا drop مجاز» است
در drop DOM را عوض می‌کنید — اینجا appendChild(item)
بدون preventDefault روی dragover بسیاری مرورگرها drop را اجرا نمی‌کنند
برخلاف Geolocation مختصات دستگاه نمی‌خواهد — اشاره‌گر + DOM است
دمو را کوچک نگه دارید: یک منبع، یک منطقه، یک نتیجهٔ روشن

دموی بار dataTransfer

گاهی همان گره را جابه‌جا نمی‌کنید — یک رشتهٔ بار حمل می‌کنید و روی drop نشان می‌دهید. وقتی چند منبع یک هدف دارند مفید است.

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 رشتهٔ کوچک بین dragstart و drop جابه‌جا می‌کنند
نوع MIME "text/plain" برای مبتدی مناسب است
چند منبع می‌توانند با برچسب‌های مختلف یک هدف را شریک شوند
هنوز محصول آپلود فایل نیست — فقط رشتهٔ کوتاه
هنوز Geolocation نیست — پرامپت مختصات نیست
جابه‌جایی گره در برابر برچسب بار را با آنچه بعد از drop باید دیده شود انتخاب کنید
درس بعدی اختیاری: web workers اسکریپت را خارج از thread اصلی اجرا می‌کند

انتخاب زمان استفاده از DnD

کاربر کارت نمایان را به منطقهٔ مشخص می‌کشد: مناسب مقدمه
عمل حیاتی بدون مسیر کیبورد/دکمه: بد — جایگزین بگذارید
ذخیرهٔ تم: آن Web Storage بود، نه DnD
خواندن GPS: آن Geolocation (درس قبل) بود، نه DnD
کانبان/کتابخانهٔ sortable/محصول dropzone فایل: فراتر از مقدمهٔ HTML
دستگاه فقط لمسی با DnD ضعیف: زود fallback تپ/دکمه برنامه‌ریزی کنید

تمرین — بکشید، رها کنید، برچسب بزنید

دموی انتقال را بچسبانید؛ جعبه را بکشید؛ تأیید کنید جابه‌جا شد.
موقتاً preventDefault را از dragover بردارید؛ ببینید drop اغلب کار نمی‌کند؛ برگردانید.
دموی dataTransfer را بچسبانید؛ Alpha و Beta را رها کنید؛ <pre> به‌روز شود.
(اختیاری) دکمه‌ای که بدون کشیدن همان انتقال را انجام دهد.
جمله: Geolocation مختصات مجاز می‌خواند؛ Drag and Drop با اشاره‌گر جابه‌جا/برچسب می‌کند.
اگر دمو عجیب بود پنجرهٔ مرورگر واقعی ترجیح دارد نه فقط file://.
جلوتر: web workers اسکریپت پس‌زمینه — نه ژست کشیدن.

اشتباهات آسان

فراموش preventDefault روی dragover تا drop نیاید
UI فقط-DnD بدون جایگزین کیبورد/دکمه
انتظار تگ ویژهٔ <dropzone> به‌جای listener روی هر عنصر
اشتباه گرفتن DnD با Geolocation (بار اشاره‌گر ≠ مختصات دستگاه)
استفادهٔ بیش از حد DnD وقتی دکمهٔ «انتقال» همان ایده را سریع‌تر می‌آموزد
گرفتن dataTransfer به‌عنوان گاوصندوق یا پایپلاین کامل فایل در این مقدمه
گرفتن این مقدمه به‌عنوان کورس کامل sortable، لمس، یا گواهی دسترس‌پذیری

خلاصه

Drag and Drop در HTML با draggable، dataTransfer و dragstart / dragover / drop است
روی dragover (و معمولاً drop) preventDefault کنید تا ژست کامل شود
HTML منبع را علامت می‌زند؛ اسکریپت معنی drop را تعریف می‌کند
وقتی عمل مهم است مسیر غیرکشیدن بگذارید
Geolocation مختصات مجاز بود؛ این درس جابه‌جایی/برچسب با اشاره‌گر است
بعدی: web workers در HTML برای اسکریپت پس‌زمینه خارج از thread اصلی

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود