HTML Academy · درس

حدثا dragover وdrop

تحديد أهداف الإسقاط الصالحة ومعالجة حدث drop

الدرس 2 من 413 خطوة

حدثا dragover وdrop درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

تحتاج أهداف الإفلات إلى معالجين

يجب أن يعالج هدف الإفلات كلاً من dragover، للسماح بالإفلات، وdrop، لاستلامه. من دون dragover، يرفض المتصفح إطلاق drop لأن السلوك الافتراضي هو «لا يوجد عنصر يمثل هدفًا للإفلات».

preventDefault إلزامي

يجب استدعاء e.preventDefault() في معالج dragover. فهذا يلغي السلوك الافتراضي للمتصفح الذي يرفض الإفلات. ومن دونه يظل المؤشر في حالة "not allowed" ولا يُطلق حدث drop مهما فعل المستخدم.

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
});
zone.addEventListener("drop", (e) => {
  e.preventDefault();
  console.log(e.dataTransfer.getData("text/plain"));
});

dragenter و dragleave

يُطلق dragenter مرة واحدة عند دخول المؤشر إلى الهدف، ويُطلق dragleave مرة واحدة عند مغادرته. استخدمهما لتبديل تمييز مرئي من نوع "drag-over": أضف فئة عند الدخول وأزلها عند المغادرة حتى يرى المستخدم المنطقة التي ستستقبل الإفلات.

يُطلق dragleave للعناصر الفرعية

هناك سلوك دقيق جدير بالانتباه: يؤدي تحريك المؤشر فوق عنصر فرعي إلى إطلاق dragleave على العنصر الأب، يتبعه dragenter على العنصر الفرعي. استخدم عدادًا تزيده في dragenter وتنقصه في dragleave، ولا تزل التمييز إلا عندما يعود العداد إلى الصفر.

let counter = 0;
zone.addEventListener("dragenter", () => {
  counter++;
  zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
  counter--;
  if (counter === 0) zone.classList.remove("over");
});

ضبط dropEffect

داخل dragover، اضبط e.dataTransfer.dropEffect = "move" أو "copy" أو "link" أو "none" للتحكم في المؤشر وإخبار المصدر بما سيحدث. يجب أن يكون التأثير متوافقًا مع effectAllowed لدى المصدر، وإلا رُفض الإفلات.

قراءة البيانات عند drop

في معالج drop، استدعِ e.dataTransfer.getData(format) باستخدام نوع MIME نفسه الذي استُخدم مع setData، وغالبًا ما يكون "text/plain". بعد ذلك حدّد العنصر باستخدام المعرّف، أو ألحِقه بالهدف، أو حدّث نموذج البيانات، أو نفّذ أي إجراء تحتاج إليه التطبيقات.

منع السلوك الافتراضي عند drop

تحتاج أيضًا إلى e.preventDefault() في معالج drop. ومن دونه يعود المتصفح إلى سلوكه الأصلي — فإذا كان العنصر المُفلت عنوان URL، فذلك يعني الانتقال إلى الرابط، مما يمحو حالة صفحتك فورًا.

الإفلات من سطح المكتب

يحوّل المتصفح الملفات المسحوبة من نظام التشغيل إلى حدث drop مع تعبئة e.dataTransfer.files. كرّر عناصر FileList واقرأ كل ملف باستخدام File API لدعم رفع الصور أو عارضات ملفات السجل أو مستوردي المستندات.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  for (const file of e.dataTransfer.files) {
    console.log(file.name, file.size);
  }
});

أنواع متعددة في dataTransfer

يمكن لـ setData تخزين الحمولة نفسها تحت عدة أنواع MIME: "text/plain" كخيار احتياطي، و"text/uri-list" لعناوين URL، و"application/json" للحمولات المنظمة. ويختار هدف الإفلات أغنى نوع يفهمه عبر getData.

التنسيق مع أحداث اللمس

لا تنشئ متصفحات الأجهزة المحمولة حدثي dragover وdrop تلقائيًا استنادًا إلى اللمس. ولتوفير تجربة موحدة، استخدم Pointer Events مع اختبار يدوي لنقاط الاصطدام، أو مكتبة تخفي الفروق. ومن الأفضل التعامل مع HTML5 DnD الأصلي على أنه مخصص للحواسيب المكتبية فقط.

نصيحة للأداء

يُطلق dragover باستمرار أثناء تحرك المؤشر، وغالبًا عشرات المرات في الثانية. اجعل المعالج خفيفًا: تجنب استعلامات DOM المكلفة أو قراءات التخطيط داخله. خزّن المستطيلات مؤقتًا في dragenter وأعد استخدامها ما دام المؤشر فوق الهدف.

اختبار المعرفة

لماذا لا يُطلق حدث drop على الهدف حتى تستدعي e.preventDefault() في معالج dragover؟

أجب عليها في الدرس التفاعلي

الملخص

يستمع هدف الإفلات العامل إلى dragover، مع استدعاء preventDefault دائمًا وضبط dropEffect اختياريًا، وإلى drop، مع استدعاء preventDefault مرة أخرى ثم قراءة dataTransfer.getData أو dataTransfer.files. استخدم dragenter وdragleave مع عداد لإظهار التمييز، وأبقِ المعالجات خفيفة لأن dragover يُطلق كثيرًا جدًا.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «حدثا dragover وdrop» مجاني؟

نعم — نص درس «حدثا dragover وdrop» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «حدثا dragover وdrop»؟

تحديد أهداف الإسقاط الصالحة ومعالجة حدث drop تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «حدثا dragover وdrop»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy