HTML Academy · درس

السمة draggable وحدث dragstart

جعل العناصر قابلة للسحب والاستجابة لحدث dragstart

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

السمة draggable

يصبح أي عنصر مصدرًا للسحب عند ضبط draggable="true". تكون الروابط والصور قابلة للسحب افتراضيًا، بينما تتطلب العناصر الأخرى مثل div وli وspan السمة صراحةً. تؤدي draggable="false" إلى استثناء العنصر من السحب الأصلي.

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

حدث dragstart

عندما يبدأ المستخدم عملية سحب، يطلق العنصر المصدر الحدث dragstart. هذا هو الموضع الذي تهيئ فيه عملية السحب: سجّل العنصر الذي يتحرك، ونسّقه اختياريًا، واكتب البيانات في كائن dataTransfer ليقرأها هدف الإفلات.

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

لا يحدث شيء من دون dragstart

إذا جعلت عنصرًا قابلًا للسحب ولم تعالج dragstart مطلقًا، فسيواصل المتصفح سحب صورة شبحية، لكن لن تُضبط أي بيانات، ولذلك ترفض معظم أهداف الإفلات العملية. احرص دائمًا على إقران السمة draggable بمستمع dragstart يخزن معرفًا واحدًا على الأقل.

ضبط effectAllowed

يقيّد e.dataTransfer.effectAllowed = "move" داخل dragstart العملية لتكون إحدى القيم: "copy" أو "move" أو "link" أو "copyMove" أو "all" أو "none". ويحدد ذلك المؤشر الذي يعرضه المتصفح وقيمة dropEffect التي قد يضبطها الهدف لاحقًا.

إضافة إشارة مرئية

أضف فئة CSS إلى المصدر ليظهر باهتًا أثناء سحبه: card.classList.add("dragging"). أزل الفئة في حدث dragend حتى تُمسح الأنماط سواء نجح الإفلات أو أُلغي باستخدام Escape.

صورة سحب مخصصة

يسحب المتصفح افتراضيًا لقطة شبه شفافة من المصدر. يمكنك استبدالها باستخدام e.dataTransfer.setDragImage(node, offsetX, offsetY) — مرّر عنصر DOM مخفيًا أو كائن Image لعرض معاينة مخصصة عند المؤشر.

const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

حدث dragend

يُطلق dragend على المصدر بعد اكتمال السحب، سواء تم الإفلات بنجاح أو على هدف غير صالح أو أُلغي. استخدمه لأعمال التنظيف، مثل إزالة فئة dragging وإخفاء المعاينات الشبحية واستعادة الشفافية.

اكتشاف الإلغاء

داخل dragend، افحص e.dataTransfer.dropEffect. إذا كانت القيمة "none" فهذا يعني أن الإفلات لم يحدث، لأن الهدف رفضه أو ضغط المستخدم على Escape أو أفلت العنصر خارج الصفحة. وإلا فتساوي القيمة التأثير الذي اختاره هدف الإفلات، أي "move" أو "copy" أو "link".

السحب على الأجهزة اللمسية

تُصمم ميزة السحب والإفلات الأصلية للحواسيب المكتبية أولًا. وعلى الأجهزة اللمسية، لا تعمل الواجهة البرمجية تقريبًا من دون polyfill أو بديل يعتمد على Pointer Events. ولإنشاء واجهات إعادة ترتيب مناسبة للهواتف، يُفضّل استخدام مكتبات مثل SortableJS أو dnd-kit التي تخفي الفروق بين نموذجي الأحداث.

اعتبارات إمكانية الوصول

لا يمكن الوصول إلى السحب والإفلات الأصلي باستخدام لوحة المفاتيح، إذ لا يستطيع المستخدمون الذين يعتمدون على لوحة المفاتيح وحدها إعادة ترتيب العناصر. وفّر دائمًا بديلًا، مثل معالجات مفاتيح الأسهم أو زري التحريك لأعلى والتحريك لأسفل أو مربع حوار لإعادة الترتيب يتحكم فيه aria. ينبغي أن يعزز السحب والإفلات التجربة لا أن يحل محلها.

تعطيل الإعدادات الافتراضية للمتصفح

قد يتداخل تحديد النص داخل العناصر القابلة للسحب مع عملية السحب. طبّق CSS user-select: none و-webkit-user-drag: element على المصدر حتى يسحب المتصفح العنصر بدلًا من تحديد النص الموجود بداخله.

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

لماذا يجب عليك عادةً إرفاق مستمع dragstart رغم أن السمة draggable="true" وحدها تجعل العنصر قابلًا للسحب؟

الملخص

حدّد المصادر باستخدام draggable="true"، واستخدم dragstart لملء dataTransfer وضبط effectAllowed، وإضافة صورة سحب مخصصة اختياريًا. واقرن ذلك بـ dragend لتنظيف الأنماط. وفّر بدائل باستخدام لوحة المفاتيح لإتاحة الوصول، وفكّر في استخدام polyfills للأجهزة اللمسية.

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

هل درس «السمة draggable وحدث dragstart» مجاني؟

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

ماذا ستتعلم في «السمة draggable وحدث dragstart»؟

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

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

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

كم من الوقت يستغرق درس «السمة draggable وحدث dragstart»؟

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

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

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

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

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