كيفية استخدام واجهة برمجة تطبيقات السحب والإفلات بتنسيق HTML

يعد السحب والإفلات ميزة أساسية تعمل على تحسين تفاعل المستخدم وتسهيل تجربة المستخدم السلسة. سواء كنت تتطلع إلى إنشاء أداة تحميل ملفات، أو قائمة قابلة للفرز، أو لعبة تفاعلية، يعد فهم كيفية الاستفادة من إمكانيات واجهة برمجة التطبيقات (API) هذه مهارة بالغة الأهمية يجب أن تمتلكها على الويب الخاص بك مجموعة أدوات التطوير.

أساسيات السحب والإسقاط في HTML

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

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

<divdraggable="true">This element is draggablediv>

عندما يبدأ المستخدم في إطلاق حدث سحب، يوفر المتصفح صورة افتراضية "شبحية" توفر عادةً تعليقات بخصوص العنصر الذي يتم سحبه.

يمكنك تخصيص هذه الصورة عن طريق توفير صورتك الخاصة بدلاً من ذلك. للقيام بذلك، حدد العنصر القابل للسحب من DOM، وقم بإنشاء صورة جديدة لتمثيل صورة التعليقات المخصصة، ثم قم بإضافة دراجستارت اسحب مستمع الحدث مثل هذا:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

في كتلة التعليمات البرمجية أعلاه، setDragImage الطريقة لديها ثلاث معلمات. تشير المعلمة الأولى إلى الصورة. تمثل المعلمات الأخرى الإزاحات الأفقية والرأسية للصورة على التوالي. عند تشغيل التعليمات البرمجية في المتصفح والبدء في سحب عنصر، ستلاحظ أنه تم استبدال صورة السحب المخصصة بالصورة المخصصة التي تم تعيينها مسبقًا.

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

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

فهم واجهة DragEvent

ميزات جافا سكريبت أ DragEvent الواجهة التي تمثل تفاعل السحب والإفلات من المستخدم. فيما يلي قائمة بأنواع الأحداث المحتملة ضمن DragEvent واجهه المستخدم.

• يجر: يقوم المستخدم بإطلاق هذا الحدث أثناء سحب عنصر.
• اسحب: يتم إطلاق هذا الحدث عندما تنتهي عملية السحب أو عندما يقاطعها المستخدم. يمكن أن تنتهي عملية السحب النموذجية بتحرير زر الماوس أو الضغط على مفتاح الهروب.
• دراجنتر: يقوم العنصر المسحوب بتشغيل هذا الحدث عندما يدخل هدف إسقاط صالحًا.
• Dragleave: عندما يترك العنصر المسحوب هدف الإسقاط، يتم إطلاق هذا الحدث.
• سحب أكثر: عندما يقوم المستخدم بسحب عنصر قابل للسحب فوق هدف الإسقاط، يتم إطلاق الحدث.
• دراجستارت: يتم إطلاق الحدث عند بداية عملية السحب.
• يسقط: يقوم المستخدم بتشغيل هذا الحدث عندما يقوم بإسقاط عنصر على هدف الإسقاط.

عند سحب ملف إلى المتصفح من بيئة خارج المتصفح (على سبيل المثال، مدير ملفات نظام التشغيل)، لا يقوم المتصفح بتشغيل دراجستارت أو اسحب الأحداث.

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

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

في كتلة التعليمات البرمجية أعلاه، customDragStartEvent يمثل مثالا حدث السحب (). في customDragStartEvent، هناك وسيطتان منشئتان. الأول يمثل نوع حدث السحب، والذي يمكن أن يكون أحد أنواع الأحداث السبعة المذكورة سابقًا.

الوسيطة الثانية هي كائن ذو أ نقل البيانات مفتاح يمثل مثيل نقل البيانات، والتي سوف تتعلم المزيد عنها لاحقًا في هذا الدليل. بعد ذلك، قم بالتقاط العنصر الذي تريد تشغيل الحدث منه، من نموذج كائن المستند (DOM).

const draggableElement = document.querySelector("#draggable");

ثم أضف مستمعي الحدث هكذا:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

في مستمع الحدث الأول أعلاه، تقوم ميزة وظيفة رد الاتصال بتسجيل النص، "بدأ السحب!" ويستدعي setData الطريقة على نقل البيانات الملكية على حدث هدف. الآن، يمكنك تشغيل الأحداث المخصصة مثل هذا:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

نقل البيانات مع نقل البيانات

ال نقل البيانات يعمل الكائن كجسر بين العنصر المصدر (العنصر القابل للسحب) والعنصر الهدف (المنطقة القابلة للإفلات) أثناء عملية السحب والإفلات. يعمل كحاوية تخزين مؤقتة للبيانات التي تريد مشاركتها بين هذه العناصر.

يمكن أن تتخذ هذه البيانات أشكالًا مختلفة، مثل النص أو عناوين URL أو أنواع البيانات المخصصة، مما يجعلها أداة متعددة الاستخدامات لتنفيذ نطاق واسع من وظائف السحب والإفلات.

استخدام setData() لبيانات الحزمة

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

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

عندما يبدأ المستخدم في سحب العنصر المحدد، مجموعة البيانات () حزم النص "مرحبا بالعالم!" مع نوع البيانات نص عادي. ترتبط هذه البيانات الآن بحدث السحب ويمكن الوصول إليها بواسطة الهدف القابل للإسقاط أثناء عملية الإفلات.

استرداد البيانات باستخدام getData()

على الطرف المتلقي، ضمن مستمع الأحداث للعنصر القابل للإسقاط، يمكنك استرداد البيانات المنقولة باستخدام احصل على البيانات() طريقة:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

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

استخدام الحالات لواجهات السحب والإسقاط

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

• القائمون على رفع الملفات: يؤدي السماح للمستخدمين بسحب الملفات مباشرة من سطح المكتب أو مدير الملفات إلى منطقة إسقاط مخصصة إلى تبسيط عملية التحميل.
• قوائم قابلة للفرز: إذا كان التطبيق الخاص بك يتضمن قوائم عناصر، مثل قوائم المهام أو قوائم التشغيل أو معارض الصور، فقد يقدر المستخدمون القدرة على إعادة ترتيب العناصر عبر السحب والإفلات.
• لوحات المعلومات التفاعلية: ل أدوات تصور البيانات وإعداد التقاريريمكن أن يكون السحب والإفلات وسيلة فعالة للمستخدمين لتخصيص لوحات المعلومات الخاصة بهم عن طريق إعادة ترتيب الأدوات والمخططات.

الحفاظ على إمكانية الوصول في الاعتبار

على الرغم من أن السحب والإفلات يمكن أن يكون جذابًا من الناحية المرئية ويعزز تجربة المستخدم، فمن الضروري التأكد من أن التنفيذ الخاص بك يظل في متناول جميع المستخدمين، بما في ذلك الأشخاص ذوي الإعاقة. قم بتوفير طرق بديلة للتفاعل، مثل عناصر التحكم في لوحة المفاتيح، لجعل تطبيقك شاملاً.