السحب والإسقاط هي ميزة شائعة ، أي السحب إلى موضع آخر بعد كائن الالتقاط. في HTML5 ، يمكن للمستخدمين استخدام الماوس لتحديد عنصر السحب ، وسحب العنصر إلى عنصر قابل للتطبيق ، ووضع زر الماوس على هذه العناصر. أثناء عملية السحب ، يمكن سحب مؤشر الماوس نصف الشفاف.
إذا كنا نأمل أن يتم سحب العنصر ، فسنحتاج إلى تعيين خاصية قابلة للسحب إلى True (العلامة الافتراضية القابلة للسحب صحيحة))
حدث السحب والإفلاتسيتم تشغيل العديد من الأحداث في مراحل مختلفة من عملية السحب والإفلات ، ويجب أن تقوم سمة Datatransfer لحادث السحب والسحب بتخزين البيانات ذات الصلة في عملية السحب والإفلات.
| DragStart | نشط لـ [Source Element] ، عندما يبدأ العنصر في السحب ، يتطلب عنصر سحب المستخدم حدث DragStart إضافي. في هذا الحادث ، سيقوم المستمع بإعداد المعلومات المتعلقة بهذا السحب ، مثل سحب البيانات والصور. |
| Dragenter | نشطًا لعنصر المصدر] ، يطلق عندما يكون الماوس الموجود في السحب إلى عنصر. يحتاج مستمع هذا الحادث إلى الإشارة إلى ما إذا كان يُسمح بإطلاق سراح الماوس في هذا المجال. إذا لم يتم تعيين المستمع أو لم يتم تشغيل المستمع ، فلا يُسمح بإصداره افتراضيًا. |
| السحب | نشط في [العنصر الهدف] ، يتم تشغيله عندما نقل الماوس عن طريق السحب. |
| Dragleave | نشط في [العنصر الهدف] ، يطلق عندما يترك الماوس عنصر في السحب. يمكن استخدامه كعلامة تسليط الضوء أو إدراج يمكن إصدارها. |
| يجر | نشط لـ [عنصر المصدر] ، يتم تشغيل الحدث عند سحب العنصر. |
| يسقط | يتم تنشيطه لـ [عنصر الهدف] ، ويعزف على عنصر الإصدار عند إصدار عملية السحب. |
| Dragnd | نشط لعنصر المصدر] ، يتم تشغيل مصدر السحب في نهاية عملية السحب ، بغض النظر عما إذا كانت العملية ناجحة. |
(عند السحب ، لن يؤدي إلا إلى تشغيل الأحداث ذات الصلة السحب ، وأحداث الماوس ، مثل Mousemove ، والتي لن يتم تشغيلها)
كائن datatransferعند معالجة عملية السحب والإفلات ، نحتاج إلى استخدام كائن DataTransfer لحفظ البيانات التي تم سحبها. يمكن أن يحفظ DataTransfer بيانات واحدة أو أكثر ، ونوع بيانات واحد أو أكثر.
ملكية
| Dropeffect | Dropeffect [سلسلة] حدد تأثير الموضع الفعلي ، القيمة الممكنة: نسخ: انسخ إلى موقف جديد الانتقال: انتقل إلى موقف جديد الرابط: قم بإنشاء رابط من مصدر إلى موضع جديد لا شيء: ممنوع من وضع (بدون عملية) |
| التأثير | [سلسلة] حدد التأثير المسموح به عند السحب ، القيم الممكنة: نسخ: انسخ إلى موقف جديد. الانتقال: انتقل إلى وضع جديد. الرابط: قم بإنشاء رابط من مصدر إلى موقع جديد. Copylink: السماح بنسخ أو رابط. copymove: السماح بنسخ أو تحرك. LinkMove: السماح بالروابط أو التحرك. الكل: السماح لجميع العمليات. لا شيء: ممنوع جميع العمليات. غير مهتم: القيمة الافتراضية (القيمة الافتراضية) تعادل الجميع. |
| الملفات | يحتوي على قائمة بالملفات المحلية المتوفرة على نقل البيانات. إذا كانت عملية السحب لا تتضمن ملف السحب ، فإن هذه السمة هي قائمة فارغة. |
| الأنواع | احفظ قائمة من أنواع بيانات التخزين كعنصر أول ، يتوافق الطلب مع ترتيب إضافة البيانات. إذا لم تتم إضافة أي بيانات ، فسيتم إرجاع قائمة فارغة. |
طريقة
| adlelement باطلة (عنصر العنصر) | اضبط مصدر السحب. عادة ما تكون هناك حاجة لتغيير هذا. الهدف الافتراضي هو أن تكون العقد المجردة |
| void cleardata (نوع السلسلة) | حذف البيانات المرتبطة بنوع معين. المعلمات اكتب اختيارية. إذا كان النوع فارغًا أو غير محدد ، فقم بحذف جميع أنواع البيانات المرتبطة بها. إذا لم يكن هناك نوع محدد من البيانات أو نقل البيانات لا يحتوي على أي بيانات ، فلن يكون لهذه الطريقة أي تأثير. |
| سلسلة getData (نوع السلسلة) | الحصول على نوع معين من البيانات ، إذا لم تكن بيانات النوع المحدد موجودة أو تم تخزين البيانات دون احتواء البيانات ، فستقوم الطريقة بإرجاع سلسلة فارغة. |
| void setData (نوع السلسلة ، بيانات السلسلة) | تعيين البيانات لنوع معين. إذا لم يكن نوع البيانات موجودًا ، فسيتم إضافته إلى النهاية ، وسيكون المشروع الأخير في قائمة النوع هذا تنسيقًا جديدًا. إذا كنت موجودًا بالفعل ، استبدل البيانات الموجودة في نفس الموضع. أي عندما يتم استبدال نفس النوع من البيانات ، فلن يتم تغيير ترتيب قائمة النوع. |
| setDragimage void (صورة domelement ، X X ، Long Y) | تخصيص صورة السحب المتوقع. في معظم الحالات ، لا يلزم تعيين هذا العنصر ، لأنه يتم إنشاء العقدة السحب كصورة افتراضية. يجب استخدام الصورة كعنصر صورة للتغذية المرتدة النزوح الأفقي في صورة x. الإزاحة الرأسية في تمثال Y. |
دعم المتصفح
Internet Explorer 9+ و Firefox و Opera 12 و Chrome و Safari 5+
رمز العرض
<! ارتفاع: 1px Solid #CCCCFF ؛ > </div class = bin> & nbsp ؛ ' e.datatransfer.effected = 'Move' ؛ True ؛ يدخل عنصر السحب في العنصر الهدف bin.ondragover = دالة (e) { '؛ وظيفة (e) {if (drag) {drag.parentnode.removechild (drag) ؛ وظيفة (e) {e.preventDefault () ؛ما سبق هو إدخال المعلومات المتعلقة بالسحب والإفلات في HTML5.