تم استخدام وظيفة السحب والإفلات لـ H5 في تطوير مشروع حديث نظرًا لأن المشروع الحالي يستخدم مجموعة VUE، فقد تم استخدام المكون الإضافي القابل للسحب، لكن العملية برمتها مؤلمة للغاية. لذلك قررت أن أبدأ في دراسة مبادئ السحب والإسقاط H5، ثم تطبيقها على إطار العمل المبني على البيانات. لتنفيذ عمليات السحب والإفلات في H5، يلزم وجود خطوتين على الأقل: 1) قم بتعيين السمة القابلة للسحب لعنصر الكائن الذي تريد سحبه وإفلاته على الوضع الصحيح (يسمح img وa بالسحب والإفلات افتراضيًا) 2) الكتابة وسحب كود التعامل مع الأحداث ذات الصلة. لتسهيل الاختبار، أستخدم أولاً مكتبة jQuery لإكمال وظيفة السحب والإفلات الأساسية.
1. عملية السحب والإسقاط 1.1 حدث السحبعند سحب العنصر القابل للسحب أثناء الضغط باستمرار على الماوس، سيتم تشغيله بالترتيب التالي:
السحب -> السحب -> السحب
عندما يتم سحب العنصر القابل للسحب إلى الحاوية، سيتم تشغيله بالترتيب التالي:
دراجنتر -> دراجوفر -> إسقاط
Dragenter: طالما تم سحب العنصر إلى هدف الإسقاط، فسيتم تشغيل حدث Dragenter.
Dragover: Dragenter يتبعه حدث Dragover، وسيستمر تشغيل هذا الحدث بينما يظل العنصر المسحوب يتحرك ضمن نطاق هدف الإسقاط.
السحب: عندما يتم سحب العنصر خارج هدف الموضع، سيتم تشغيل السحب.
إسقاط: يتم إطلاقه عند وضع العنصر المسحوب على العنصر المستهدف
1.3 تدفق الحدث الكاملمن البدء في سحب العنصر إلى وضع العنصر في المنطقة المستهدفة، سيتم تشغيله بالترتيب التالي:
السحب-> السحب-> دراجينتر-> السحب-> السحب-> السحب-> السحب-> السحب
2. حل مشكلة عدم دعم Firefox للسحب والإفلاتإذا أضفنا السمة القابلة للسحب مباشرة إلى عنصر ما، فيمكن سحبها مباشرة في Chrome وOpera (لا توجد عملية إصدار (مثل تغيير السهم إلى علامة +))، ولكن لا توجد استجابة في Firefox.
<ul class=canDrog> <li Draggable=true id=1>ممتاز</li> <li Draggable=true id=2>جيد</li> <li Draggable=true id=3>متوسط</li> <li Draggable=true id=4>ضعيف</li> </ul> <script> // لا يوجد كود JS</script>
لحل هذه المشكلة، يجب عليك ربط معالج حدث Dragstart بعنصر السحب واستدعاء الدالة events.dataTransfer.setData في هذه الوظيفة.
<script> <ul class=canDrog> <li Draggable=true id=1>ممتاز</li> <li Draggable=true id=2>جيد</li> <li Draggable=true id=3>متوسط</li > <li Draggable=true id=4>الفرق</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //فايرفوكس يجب الوصول إلى كائن نقل البيانات المستخدم لاتصالات السحب والإفلات events.dataTransfer.setData(Text,'1' });</script> 3. حل مشكلة عدم ظهور علامة الإصدار عند سحب العناصر إلى الحاوية في Chrome وOperaقد يختلف الشعار القابل للإصدار وفقًا لنظام التشغيل. في Mac Chrome، يظهر كشعار دائري به علامة "+" بيضاء اللون.
الحل هو ربط حدث السحب بالحاوية
<ul class=canDrog> <li Draggable=true id=1>ممتاز</li> <li Draggable=true id=2>جيد</li> <li Draggable=true id=3>متوسط</li> <li Draggable=true id=4>الفرق</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>القسم/الأسبوع</th> <th>الاثنين</th> <th>الثلاثاء</th> <th>الأربعاء</th> <th>الخميس</th> <th>الجمعة</th> </tr> </thead> <tbody > <tr> <td>القسم 1</td> <td Draggable=true ><</td> <td Draggable=true ><</td> <td Draggable=true ><</td> <td Draggable= true >< /td> <td Draggable=true ></td> </tr> <!--تم الحذف هنا--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( حدث) {// يجب على فايرفوكس الوصول إلى كائن نقل البيانات المستخدم للاتصال بالسحب والإفلات events.dataTransfer.setData(Text,'1' }); يحتاج Chrome وOpera إلى إضافة $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script> 4. حل مشكلة فتح علامة تبويب جديدة في متصفح فايرفوكس عند وضعهاإذا قمت بتحرير العنصر المسحوب عند استخدام Firefox، فسيفتح المتصفح الافتراضي علامة تبويب جديدة، على النحو التالي
وذلك لأن المتصفح ينفذ السلوك الافتراضي بعد وظيفة رد الاتصال. الحل المعتاد هو إضافة تعليمات برمجية تمنع تنفيذ الحدث الافتراضي وتمنع ظهور فقاعات في خطاف الإسقاط لحاوية السحب.
<script> // حرر العنصر إلى العنصر الحالي $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); events.preventDefault ()؛event.stopPropagation() });</script>ومع ذلك، إذا تم سحب العناصر القابلة للسحب إلى أماكن أخرى، فستظل مشكلة فتح علامات تبويب جديدة موجودة. في هذه الحالة، يمكن إضافة الكود أعلاه إلى جميع الحاويات.
5. اكتب مثالاً صغيراً كاملاًكود المصدر: https://github.com/pluslicy/drag
سندرس لاحقًا مكتبة المكونات الإضافية القابلة للسحب وتطبيقها في إطار عمل vue.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.