لوقت طويل ، توجد وظائف JavaScript التي تسمح لنا بإنشاء واجهات السحب والإفلات ، ولكن لم تكن أي من هذه التطبيقات محلية في المتصفح.
في HTML5 ، لدينا طريقة أصلية لإنشاء واجهات السحب والإفلات (مع القليل من المساعدة من JavaScript).
سأترك لك كيفية تحقيق ذلك ...
أود الخروج عن هذا الطريق قبل أن نتقدم: يتم حاليًا دعم عملية السحب والإفلات بتنسيق HTML5 بواسطة جميع متصفحات سطح المكتب الرئيسية (بما في ذلك IE (حتى IE 5.5 يحتوي على دعم جزئي)) ولكنه غير مدعوم حاليًا بواسطة أي من أجهزة الجوال الشائعة المتصفحات.
في كل مرحلة من عملية السحب والإسقاط يتم تشغيل حدث مختلف بحيث يعرف المتصفح تعليمات JavaScript البرمجية ؛ الأحداث هي:
مع كل هؤلاء المستمعين للحدث ، لديك الكثير من التحكم في كيفية عمل الواجهة الخاصة بك بالضبط وكيف تؤدي في ظروف مختلفة.
هذا هو المكان الذي يحدث كل السحب والإسقاط. يحتفظ هذا الكائن بالبيانات التي تم إرسالها بواسطة عملية السحب. يمكن ضبط البيانات واسترجاعها بطرق مختلفة ، أهمها:
الآن سنبدأ في إنشاء مثال بسيط للسحب والإفلات ، يمكنك أن ترى أن لدينا قسمين صغيرين وأكبر ، يمكننا سحب وإسقاط تلك الصغيرة داخل الكبيرة ويمكننا حتى نقلها مرة أخرى.
أول شيء يتعين علينا القيام به هو إنشاء HTML الخاص بنا. نحن نجعل الأقسام قابلة للسحب باستخدام السمة القابلة للسحب ، مثل:
draggable="true">عند الانتهاء من ذلك ، نحتاج إلى تعريف وظيفة javascript التي سيتم تشغيلها عندما نبدأ في سحب هذا العنصر:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}في هذا الكود ، نعلن أولاً عن نوع التأثير الذي نسمح به في العملية ونقوم بتعيينه للتحريك ، وفي السطر الثاني ، نقوم بتعيين البيانات الخاصة بالعملية وفي هذه الحالة ، يكون النوع هو النص والقيمة هي معرف العنصر نحن نسحب. بعد ذلك نستخدم طريقة setDragImage لضبط ما سنسحبه ومن ثم موضع المؤشر أثناء السحب ، وبما أن المكعبات 200 في 200 بكسل ، فإنني أضعها في المركز. أخيرا نعود صحيح.
من أجل قبول عنصر ما لقطرة ما ، يجب الاستماع إلى 3 أحداث مختلفة: dragEnter و dragOver وأيضًا حدث الإفلات لذا دعنا نضيف هذا إلى html الخاص بنا في div بمعرف كبير:
الآن بعد أن أضفنا مستمعي الأحداث ، نحتاج إلى إنشاء هذه الوظائف ، سنبدأ من أحداث dragenter و dragover:
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}في الوظيفة الأولى ، نحدد ما نريد أن يحدث عندما يصل العنصر الذي نقوم بسحبه إلى العنصر الذي من المفترض أن يتم إسقاطه ، وفي هذه الحالة نحن فقط نحول دون السلوك الافتراضي للمتصفح ولكن يمكنك القيام بأي عدد من الأشياء مثل تغيير الخلفية أو إضافة بعض النص للإشارة إلى أن المستخدم يتم سحبه إلى المنطقة الصحيحة واستخدام الحدث dragleave يمكنك العودة التغييرات التي أجريتها. بعد ذلك في وظيفة dragOver نقوم ببساطة بمنع الافتراضي للسماح بالتراجع.
الجزء التالي هو المكان الذي نحدد فيه الوظيفة عندما نسقط العنصر فعليًا في الهدف المطلوب:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}في هذا الجزء الأخير قمنا أولاً بتعيين متغير يسمى البيانات التي نحصل فيها على جميع البيانات المتوفرة لتنسيق النص ، ثم نرفق هذه البيانات (التي ستكون العنصر الذي نقوم بسحبه) إلى div حيث نرغب في إسقاط العنصر. وأخيرا بعض اللمسات الأخيرة مثل وقف انتشار وعودة كاذبة أيضا.
تدقيق التجريبي ، يمكنك أن ترى أيضًا أننا تأكدنا من إمكانية سحب العنصرين إلى موقعهما الأصلي. لحسن الحظ ، قد يكون إضافة هدف إسقاط آخر أبسط مما تعتقد ؛ لأن الوظائف موجودة بالفعل ، كل ما علينا القيام به هو إضافة المستمعين للحدث ، مثل:
وهذا كل ما نحتاج إليه للسماح بسحب الأقسام إلى المكان الأصلي.
هناك الكثير من تطبيقات السحب والإسقاط التي تم إنشاؤها باستخدام مكتبات JavaScript ، وغالبًا ما يكون استخدام هذه المكتبات أسهل بكثير. ولكنني آمل أن ترى في تقنية HTML5 و JavaScript هذه الإمكانية المستقبلية للحل المحلي.
هل قمت ببناء واجهة السحب والإفلات؟ كيف يمكن مقارنة HTML5 الأصلي بحلول جافا سكريبت الخالصة؟ اسمحوا لنا أن نعرف في التعليقات.