جاري التحميل...

السحب والإفلات في HTML

سابقاً Geolocation طلب الإحداثيات بعد الإذن. هذا الدرس يترك الإحداثيات ويقدّم السحب والإفلات في HTML: تعليم ما يُسحب، حمل صغير عبر dataTransfer، وتحديد ما يحدث عند الإفلات. النطاق عملي — draggable وpreventDefault وdrop بسيط — لا مكتبات sortable أو رفع ملفات.

لماذا السحب والإفلات في دورة HTML

المبتدئ يريد غالباً سحب بطاقة إلى صندوق. DnD الأصلي أول واجهة شائعة لذلك. بعد Geolocation يختلف التقسيم: HTML يعلّم المصدر؛ JS يعرّف الأحداث ومعنى drop.

إجابة مباشرة

1) draggable="true". 2) setData في dragstart. 3) preventDefault على dragover. 4) في drop اقرأ getData وحرّك أو حدّث الواجهة. 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)

عرض صغير لنقل العقدة

صندوق قابل للسحب؛ عند الإفلات يُلحق داخل المنطقة. بدون preventDefault على dragover قد لا يعمل 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 لـ setData
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

إعادة ترتيب بطاقة إلى منطقة واضحة: مناسب
فعل حرج بلا بديل: سيئ
تفضيل المظهر: Web Storage
GPS: كان Geolocation
منتج kanban كامل: خارج المقدمة

تمرين — اسحب وأفلت وسمِّ

الصق عرض النقل وجرّب.
أزل preventDefault مؤقتاً ولاحظ تعطل drop.
جرّب عرض dataTransfer.
اختياري: زر ينقل بلا سحب.
جملة: Geolocation يقرأ إحداثيات؛ DnD ينقل أو يسمّي.
فضّل نافذة متصفح حقيقية.
التالي web workers.

أخطاء سهلة

نسيان preventDefault على dragover
واجهة DnD فقط بلا بديل
توقع وسم dropzone
الخلط مع Geolocation
الإفراط في DnD بدل زر
اعتبار المقدمة دورة sortable كاملة

ملخص

السحب والإفلات: draggable وdataTransfer والأحداث الثلاثة
preventDefault على dragover ضروري غالباً
HTML يعلّم المصدر؛ السكربت يعرّف drop
وفّر مساراً بلا سحب عند الحاجة
Geolocation كان إحداثيات؛ هنا نقل/تسمية بالمؤشر
التالي: web workers

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى