JavaScript هي واحدة من أكثر لغات البرمجة شعبية، وهي مدعومة بأكثر من 24 إطار عمل وحوالي 84 مكتبة. إنها لغة البرمجة الوحيدة المدعومة بشكل أساسي من قبل جميع المتصفحات. بالإضافة إلى ذلك، تدعم اللغة الكتابة الديناميكية وتعد مناسبة تمامًا لعمليات الريندر والرسوم المتحركة. يمكنك الاستفادة من JavaScript لإضافة سلوك تفاعلي في الواجهة الأمامية، والتحكم في الواجهة الخلفية، وإنشاء تطبيقات الويب والهاتف المحمول، والمزيد. إن خيار إضافة تأثيرات إلى أي موقع ويب وجعله قابلاً للتخصيص يجعل هذه اللغة مفضلة لدى المطورين على مستوى العالم.
في هذا الدليل، سنقوم بـ إرشادك عبر خطوات إنشاء عناصر السحب والإفلات باستخدام لغة Vanilla JavaScript البسيطة. بالإضافة إلى ذلك، سنتقدم خطوة أخرى إلى الأمام ونبني تطبيق "مخطط الصباح" باستخدام HTML Drag and Drop API معالجات الأحداث.
المتطلبات الأساسية
لمتابعة هذا البرنامج التعليمي، يجب أن يكون لديك:
الخطوة 1: إنشاء مشروع جديد
ابدأ بإنشاء حاوية تحتوي على عنصرين فرعيين. سنستخدم العنصر الفرعي الأول للسحب والعنصر الفرعي الثاني لتخزين العناصر المسحوبة.
|
ملاحظة: في هذا البرنامج التعليمي، سنعامل الحاويات كمخزن للاحتفاظ بجميع العناصر المسحوبة. بعبارات بسيطة، سيتم إسقاط جميع العناصر المسحوبة من العنصر الفرعي الأول في العنصر الفرعي الثاني. |
|
1 |
$ mkdir drag-and-drop-demo |
بعد ذلك، استخدم أمر cd لتغيير الدليل إلى مجلد drag-and-drop-demo :
|
1 |
$ cd drag-and-drop-demo |
الخطوة 2: الإعداد الأولي
في هذا البرنامج التعليمي، سنقوم بإنشاء ملفات HTML و CSS و JavaScript وربطها. أولاً، قم بتسمية الملفات باسم index.html, styles.css، و scripts.js على التوالي.
بعد ذلك، أضف العنوان كـ “مخططي الصباحي” في ملف index.html :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>مخططي الصباحي</title> </head> <body> </body> </html> |
بعد ذلك، قم بربط CSS، و إضافة JavaScript إلى HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>مخططي الصباحي</title> </head> <body> </body> </html> |
بعد ذلك، أضف أسطر التعليمات البرمجية التالية في علامات <body> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>مخطط الصباح الخاص بي</title> </head> <body> <div class="container"> <h1><center>مخطط الصباح الخاص بي</center></h1> <h2 class="draggable" draggable="true">الذهاب إلى صالة الألعاب الرياضية</h2> <h2 class="draggable" draggable="true">القراءة لمدة 30 دقيقة</h2> <h2 class="draggable" draggable="true">تحضير الشوفان</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">أخذ حمام بارد</h2> <h2 class="draggable" draggable="true">بدء يومي</h2> </div> </body> </html> |
احفظ وأغلق ملف index.html. بعد ذلك، جرب فتح ملف index.html في متصفحك وسترى صفحة تفتح:
بعد ذلك، دعنا ننسق ملف index.html باستخدام CSS لجعله يبدو بمظهر لائق.
الخطوة 3: التنسيق باستخدام CSS
بعد ذلك، أضف التنسيقات على جميع العناصر التي قمنا بتضمينها في ملف index.html الخاص بنا:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
جرب فتح ملف index.html في متصفحك وشاهد النتيجة:
على الرغم من أننا انتهينا من الهيكلة وإضافة التنسيقات، إلا أن العناصر لا تزال ثابتة. هذا يعني أنه لا يمكننا نقل العناصر أو تمريرها حتى نضيف ميزات ديناميكية إليها. في الخطوة التالية، سنرحب بلغة JavaScript والسلوكيات الديناميكية.
الخطوة 4: تقديم JavaScript
في هذه الخطوة، سنقوم بتقديم لغة JavaScript ونجعل جميع عناصر السحب صالحة للعمل. في ملف JS، قم بتعيين العناصر التي سنحتاج إليها. دعنا نحدد draggable و containers لسحب وإفلات العناصر على التوالي.
أضف سطري البرمجة في ملف scripts.js :
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
بعد ذلك، قم بإعداد جميع مستمعي الأحداث. ابدأ بإضافة عنصر “dragstart” كأول مستمع حدث لـ add قائمة الفئات. وبالمثل، أضف عنصر “dragend” كمستمع الحدث الثاني لـ remove قائمة الفئات.
قم بإرفاق EventListeners التالية في ملف scripts.js الخاص بك:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
بعد ذلك، أضف “dragover” EventListener للتمرير وتحريك عناصرنا. قم بتعيين عنصر draggable الحالي باستخدام querySelector ثم قم بإلحاق العنصر القابل للسحب بالحاوية الحالية:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
بشكل افتراضي، يتم تعطيل الإفلات داخل العنصر. استخدم e.preventDefault لتمكينه:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
بعد ذلك، قم بإنشاء عنصر لتحديد موضع الماوس. ابدأ بإنشاء دالة getDragAfterElement حيث ستأخذ معلمتين. الأولى ستكون container والمعلمة الثانية y ستتولى تحديد موضع y للماوس. الآن، استخدم الدالة querySelectorAll للحصول على العناصر القابلة للسحب الخاصة بنا. قم بتعريف draggableElements لجميع العناصر القابلة للسحب داخل الحاوية:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
بعد ذلك، قم باستدعاء دالة reduce والتي ستدور عبر قائمة العناصر القابلة للسحب وتحدد أيضًا العنصر الفردي بعد مؤشر الماوس. بعد ذلك، return دالة reduce عن طريق إضافة العنصر الأول كـ closest والثاني كـ child. أيضًا، قم بمساواة offset وأضف الشروط.
أضف أسطر الكود التالية في scripts.js ملف:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
قم بتضمين هذا في scripts.js ملف:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
الآن انتهينا من الإعداد اللازم. افتح متصفحك وقم بتشغيل index.html في متصفحك. سترى الصفحة “My Morning Scheduler” مع خيارات السحب والإفلات. يعمل الخط الأبيض في المنتصف كجسر للتمييز بين المهام التي تم إنجازها بالفعل وتلك التي لم يتم إنجازها بعد:
الخاتمة
يعد السحب والإفلات خيارًا ممتازًا للاستخدام في مواقع الويب الحديثة. في هذا الدليل، استخدمنا عددًا قليلاً من معالجات الأحداث لجعل البرنامج التعليمي سهلاً للمبتدئين. هناك ثمانية معالجات أحداث في المجمل ونشجعك على استخدامها مع تقدمك. بمجرد أن تشعر بالارتياح تجاه استخدام الدوال والكود المستخدم في هذا البرنامج التعليمي، يمكنك التعمق أكثر في موضوعات JavaScript مثل jQuery والبدء في الاستكشاف. يمكنك أيضًا تجربة بناء تطبيق مهام (To-Do)، ومتتبع التقدم الأسبوعي باستخدام ميزات التاريخ والوقت في JavaScript، وتطبيقات أخرى باستخدام المفاهيم التي تعلمتها للتو.
لمزيد من التعلم حول موضوعات JavaScript وتطوير الويب، تحقق من هذه الموارد من مدونتنا:
- أدوات JavaScript: localStorage و sessionStorage
- العمل مع JavaScript: ما هي الكائنات (Objects)
- برنامج تعليمي حول العمل مع JSON في JavaScript
- العمل مع JavaScript: كيفية عمل الفئات
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.