JavaScript Academy · درس

جعل العناصر قابلة للسحب

فعّلوا السحب وتعاملوا مع أحداثه.

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

واجهة برمجة التطبيقات للسحب والإفلات في HTML

تتيح واجهة برمجة التطبيقات الأصلية للسحب والإفلات للمستخدمين إمساك العناصر وإفلاتها في مكان آخر. وهي تعتمد على الأحداث: تطلق العناصر المصدر أحداث السحب، وتطلق أهداف الإفلات أحداثها الخاصة. ولا تحتاج إلى مكتبة.

السمة draggable

لا يمكن سحب العناصر افتراضيًا سوى الروابط والصور. أضف draggable="true" لجعل أي عنصر قابلًا للسحب.

<div draggable="true" id="card">Drag me</div>

ضبط draggable في JavaScript

يمكنك تبديل هذا السلوك من البرنامج النصي عبر الخاصية draggable.

const card = document.getElementById("card");
card.draggable = true;

حدث dragstart

يُطلَق dragstart في اللحظة التي يبدأ فيها السحب. وهذا هو الموضع الذي تسجّل فيه العنصر الذي يجري سحبه.

card.addEventListener("dragstart", (e) => {
  console.log("Started dragging", card.id);
});

حمل البيانات باستخدام dataTransfer

يكشف الحدث عن dataTransfer. استخدم setData(format, value) داخل dragstart لإرفاق حمولة تنتقل مع عملية السحب.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

حدث drag

يُطلَق drag باستمرار أثناء تحرك العنصر. استخدمه باعتدال، إذ قد يُطلَق مرات عديدة في الثانية.

card.addEventListener("drag", (e) => {
  // fires repeatedly during the drag
});

حدث dragend

يُطلَق 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"));

التأثيرات المسموح بها

اضبط effectAllowed داخل dragstart للإعلان عن العمليات الصالحة: "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، ونسّقت العنصر المصدر. التالي: أهداف الإفلات.

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

هل درس «جعل العناصر قابلة للسحب» مجاني؟

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

ماذا ستتعلم في «جعل العناصر قابلة للسحب»؟

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

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

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

كم من الوقت يستغرق درس «جعل العناصر قابلة للسحب»؟

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

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

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

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

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