JavaScript Academy · درس

أهداف الإسقاط وdataTransfer

اقبلوا عمليات الإسقاط وانقلوا البيانات.

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

ما الذي يجعل العنصر هدفًا للإفلات؟

ترفض العناصر عمليات الإفلات افتراضيًا. لقبول عملية إفلات، يجب منع السلوك الافتراضي في كل من dragover وdrop. وهذه هي المشكلة الخفية الأكثر شيوعًا.

السماح بالإفلات باستخدام dragover

يمنع المتصفح الإفلات ما لم تستدعِ preventDefault() في معالج dragover. من دون ذلك، لا يُطلَق حدث drop مطلقًا.

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

حدث drop

عندما يحرّر المستخدم الزر فوق هدف صالح، يُطلَق حدث drop. امنع السلوك الافتراضي هنا أيضًا، فهذا يمنع المتصفح من فتح الملفات أو عناوين URL المُفلتة، ثم اقرأ البيانات.

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

قراءة dataTransfer

تسترجع getData(format) البيانات التي خُزّنت في dragstart. يجب أن تتطابق سلسلة التنسيق مع التنسيق الذي عُيّن.

const payload = e.dataTransfer.getData("text/plain");

نقل عنصر

من الاستخدامات الشائعة إلحاق العقدة المسحوبة بمنطقة الإفلات باستخدام المعرّف الذي نقلته.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

تنسيقات بيانات متعددة

يمكن أن يحتوي dataTransfer على عدة تنسيقات في الوقت نفسه — مثل text/plain وapplication/json — ويقرأ الهدف التنسيق الذي يفهمه.

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

تعيين dropEffect

في dragover، عيّن dropEffect إلى "copy" أو "move" أو "link" للتحكم في المؤشر ودلالات العملية.

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
});

مقارنة effectAllowed و dropEffect

يحدّد effectAllowed، الذي يعيّنه المصدر، العمليات المسموح بها؛ بينما يختار dropEffect، الذي يعيّنه الهدف، واحدةً منها. ويعملان معًا لإظهار المؤشر المناسب.

إعادة ترتيب قائمة

ادمج موضع الإفلات مع الإدراج لإعادة ترتيب العناصر. حدّد ما إذا كان يجب الإدراج قبل العنصر الموجود أسفل المؤشر أو بعده.

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

تحديد هدف الإفلات

استخدم e.target، وهو العنصر الموجود أسفل المؤشر، مع closest() للعثور على الحاوية المناسبة عندما تكون الأهداف متداخلة.

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

مسح البيانات

تفرغ dataTransfer.clearData() البيانات المخزنة؛ ويؤدي تمرير تنسيق إلى مسح ذلك التنسيق وحده. ويُعاد ضبط مخزن البيانات تلقائيًا بعد السحب على أي حال.

e.dataTransfer.clearData("text/plain");

تحقق سريع

اختبر أهداف الإفلات.

مراجعة: أهداف الإفلات و dataTransfer

أنشأت مناطق إفلات باستدعاء preventDefault() في dragover وdrop، وقرأت البيانات باستخدام getData، ونقلت العناصر وأعدت ترتيبها، وعيّنت dropEffect، وتعاملت مع الأهداف المتداخلة. التالي: التغذية الراجعة المرئية.

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

هل درس «أهداف الإسقاط وdataTransfer» مجاني؟

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

ماذا ستتعلم في «أهداف الإسقاط وdataTransfer»؟

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

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

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

كم من الوقت يستغرق درس «أهداف الإسقاط وdataTransfer»؟

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

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

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

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

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