كيفية استخدام Drag and Drop API

اكتشف كيفية استخدام Drag and Drop API لإنشاء تجارب تفاعلية للمستخدمين

باستخدام Drag and Drop API ، يمكنك تحديد العناصر في الصفحة التي يمكن سحبها ، والاعتراض عندما يسحب المستخدم عنصرًا.

إنه مدعوم جيدًا في المتصفحات الحديثة:

Browser support

قبل أن نبدأ في دراسة واجهة برمجة التطبيقات ، يجب أن نعرف كيفية تحديد العناصر الموجودة في الصفحةقابل للسحب. يمكننا القيام بذلك عن طريق إضافةdraggableالسمة في صفحة HTML ، بقيمةtrue:

<div draggable="true">
  ...
</div>

هذا يكفي لجعل العنصر قابلاً للسحب.

نصيحة: الصور ، تحديدات النص والروابط قابلة للسحب بشكل افتراضي ما لم تقم بتعيينهاdraggableلخطأ عليهم

يمكننا أيضًا سحب الملفات من كمبيوتر المستخدم داخل المتصفح. في هذه الحالة نقوم بالتحويلالملفات.

أين يمكننا سحب العناصر إلى نقطة أخرى نحتاج إلى توضيحها. بالإضافة إلى أنه لا يمكننا فقط سحب أي عنصر ، لا يمكننا أيضًا إسقاط أي عنصر. يجب أن يكون العنصر صالحًاهدف الإسقاط.

لجعل عنصرًا هدفًا للإسقاط ، يجب الاستماع إليهdragoverوإما أن ترجع خطأ منه ، أو تتصل بهpreventDefault()على الحدث مرت:

const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
  event.preventDefault()
})

بمجرد القيام بذلك ، لدينا عنصر قابل للسحب وهدف إسقاط ، ويمكننا البدء. الأحداث التي يمكننا التفاعل معها على العنصر القابل للسحب هي:

  • dragstart
  • drag
  • dragend

عند هدف الإسقاط:

  • dragenter
  • dragover
  • dragleave
  • drop

نظرة عامة على عملية السحب والإفلات وتشغيل الأحداث

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

element.addEventListener('dragstart', event => {
  //...
})

الeventالكائن الذي تم تمريره كمعامل لوظيفة معالجة الحدث هوDragEventموضوع.

يمتد من أكثر عموميةكائن الحدث، تتم مشاركتها مع جميع الأحداث الأخرى: الماوس ولوحة المفاتيح والتمرير وما إلى ذلك.

في هذه المرحلة ، يتم سحب العنصر وdragتم إطلاق الحدث. عدة مرات أثناء سحب العنصر ، لذلك يجب علينا استخدام الاختناق مثل لـscrollأوmouseoverالأحداث.

بمجرد أن ندخل أهدف الإسقاط:

  1. الdragenterيتم تشغيل الحدث على هدف الإسقاط
  2. الdragoverيتم تشغيل الحدث على هدف الإسقاط

إذا دخل عنصر تم سحبه أولاً في هدف الإسقاط ثم تحرك بعيدًا عنه ، فإن ملفdragleaveيتم تشغيل الحدث على هدف الإسقاط.

إذا حرر المستخدم الماوس ، فإن ملفdragendيتم تشغيل الحدث على العنصر الذي يتم سحبه ، وdropيتم تشغيل الحدث على هدف الإسقاط.

سحب البيانات:DataTransfer

كل حدث متعلق بالسحب والإفلات يأتي هوDragEventكائن كما ذكرت ، ويأتي مع خاصية تسمىdataTransferالذي يحتفظ بالبيانات التي يتم سحبها ، ويقدم 5 خصائص:

  • dropEffect
  • effectAllowed
  • files
  • items(يقرأ فقط)
  • types(يقرأ فقط)

عندما يبدأ حدث السحب ، يمكنك القيام ببعض العمليات.

تعيين / الحصول على التأثير

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

  • noneلا ينبغي إسقاطه
  • moveيمكن نقله
  • copyيمكن نسخه
  • linkيمكن ربطه
  • copyMoveيمكن نسخها أو نقلها
  • copyLinkيمكن نسخها أو ربطها
  • linkMoveيمكن نقله أو ربطه
  • allيمكن نسخها أو نقلها أو ربطها

(كلها أوتار).

الافتراضي هوall.

الdropEffectيتم استخدام الخاصية للحصول على نوع عملية السحب والإفلات ، والتي يتم تعيينها هذه المرة بواسطة المستخدم من خلال استخدام مفاتيح التعديل. على سبيل المثال ، في جهاز Mac ، يتم الضغط على ملفAltيعيّن المفتاح هدف الإسقاط لنسخ العنصر بدلاً من نقله.

هذه الخاصية ليست للقراءة فقط. يمكننا تحريره في ملفdragenterأوdragoverالحدث ، إلى إحدى قيم السلسلة هذه:

  • noneلا ينبغي إسقاطه
  • moveيمكن نقله
  • copyيمكن نسخه
  • linkيمكن ربطه

مثال:

element.addEventListener('dragenter', event => {
  event.dataTrasfer.dropEffect = 'move'
})

البيانات الجاري نقلها

يمكنك الوصول إلى العناصر التي يتم نقلها منdataTransfer.itemsproperty ، وهي كائن يشبه المصفوفة يمكنك تكراره باستخدام حلقة والوصول إلى كل منهاDataTransferItemموضوع.

DataTransferItemله خاصيتان للقراءة فقط:

  • kind: نوع العنصر الذي يتم سحبه. ترجع سلسلة تحتوي علىfileأوstring
  • typeنوع MIME للعنصر

ولها طريقتان:

  • getAsFile()إرجاع أFileكائن يمثل البيانات التي يتم سحبها
  • getAsString()ينفّذ وظيفة رد الاتصال الذي يمرر كائن سلسلة يمثل البيانات التي يتم سحبها

لديهم اسم مشابه لكنهم يعملون بشكل مختلف تمامًا. أول عوائد أFileموضوع:

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    const theFile = item.getAsFile()
  }
})

تعرف على المزيد حول كائنات الملفات فيhttps://flaviocopes.com/file/

الثاني يمرر العنصر كسلسلة لوظيفة رد الاتصال:

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    item.getAsString(theString => {
      console.log(theString)
    })
  }
})

يتم تخزين أنواع ملفات العناصر التي يتم سحبها في ملفtypesممتلكاتdataTransferموضوع. إنها مصفوفة تحتوي على السلسلةstringبشكل افتراضي. إذا كنا نسحب ملفًا ، فإن النوع المقابل هو سلسلة من القيمةFiles.

إذا كانت هناك ملفات يتم نقلها ، بالإضافة إلى كونها مدرجة فيdataTransfer.items، يتم تخزينها في ملفfilesممتلكاتdataTransfer.

تشير هذه الخاصية إلى أFileListكائن يسرد الملفات التي يتم سحبها.

تحقق من هذا العرض التوضيحي على Codepen:

انظر القلمالسحب والإفلات!بقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.

Tech Wiki Online!