كيفية إنشاء عناصر السحب والإفلات في React

هل سبق لك أن أردت إضافة وظيفة السحب والإفلات لمُكوِّنات React الخاصة بك؟ الأمر ليس بالصعوبة التي قد تتصورها.

يُعد السحب والإفلات طريقة لتحريك العناصر أو معالجتها على الشاشة باستخدام الماوس أو لوحة اللمس. إنه مثالي لإعادة ترتيب قائمة العناصر أو نقل العناصر من قائمة إلى أخرى. تحقق من كيفية إنشاء ReactOS Live على قرص USB أو قرص مضغوط.

يُمكنك بناء مُكوِّنات السحب والإفلات في React باستخدام أي من طريقتين: ميزات مُضمَّنة أو وحدة طرف ثالث.

طرق مُختلفة لتنفيذ السحب والإفلات في React

هناك طريقتان لتنفيذ السحب والإفلات في React: استخدام الميزات المُضمَّنة في React ، أو استخدام وحدة طرف ثالث. ابدأ بإنشاء تطبيق React ، ثم اختر طريقتك المُفضلة.

الطريقة الأولى: استخدام الميزات المُضمنة

في React ، يُمكنك استخدام حدث onDrag لتتبع الوقت الذي يسحب فيه المستخدم عنصرًا ، كما يوجد حدث onDrop للتتبع عند إسقاطه. يُمكنك أيضًا استخدام أحداث onDragStart و onDragEnd لتتبع وقت بدء السحب وتوقفه.

لجعل عنصر ما قابلاً للسحب ، يُمكنك ضبط السمة القابلة للسحب على “صواب”. فمثلا:

import React, { Component } from ‘react’;
class MyComponent extends Component {
 render() {
 return (
 <div
 draggable
 onDragStart={this.handleDragStart}
 onDrag={this.handleDrag}
 onDragEnd={this.handleDragEnd}
 >
 Drag me!
 </div>
 );
 }
} 
export default MyComponent;

لجعل عنصر قابل للإفلات ، يُمكنك إنشاء طرق handleDragStart و handleDrag و handleDragEnd. ستعمل هذه الطرق عندما يسحب المُستخدم العنصر وعندما يُسقطه. فمثلا:

import React, { Component } from ‘react’;
class MyComponent extends Component {
 handleDragStart(event) {
 // This method runs when the dragging starts
 console.log(“Started”)
 }
 handleDrag(event) {
 // This method runs when the component is being dragged
 console.log(“Dragging…”)
 }
 handleDragEnd(event) {
 // This method runs when the dragging stops
 console.log(“Ended”)
 }
 render() {
 return (
 <div
 draggable
 onDragStart={this.handleDragStart}
 onDrag={this.handleDrag}
 onDragEnd={this.handleDragEnd}
 >
 Drag me!
 </div>
 );
 }
}
 
export default MyComponent;

في الكود أعلاه ، هناك ثلاث طرق للتعامل مع سحب العنصر: handleDragStart و handleDrag و handleDragEnd. يحتوي div على سمة قابلة للسحب ويقوم بتعيين خصائص onDragStart و onDrag و onDragEnd إلى وظائفها المقابلة.

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

بعد ذلك ، يتم تشغيل أسلوب handleDrag بشكل مُتكرر أثناء سحب العنصر. هذا هو المكان الذي يُمكنك فيه إجراء أي تحديثات مثل ضبط موضع العنصر.

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

يُمكنك أيضًا تحريك المُكوِّن حول الشاشة في onDragEnd (). للقيام بذلك ، ستحتاج إلى تعيين خاصية النمط للمُكوِّن. فمثلا:

import React, { Component, useState } from ‘react’;
 
function MyComponent() {
 const [x, setX] = useState(0);
 const [y, setY] = useState(0);
 
 const handleDragEnd = (event) => {
 setX(event.clientX);
 setY(event.clientY);
 };
 
 return (
 <div
 draggable
 onDragEnd={handleDragEnd}
 style={{
 position: “absolute”,
 left: x,
 top: y
 }}
 >
 Drag me!
 </div>
 );
}
 
export default MyComponent;

يستدعي الكود الخطاف useState لتتبع موقعي x و y للمُكوِّن. ثم ، في طريقة handleDragEnd ، تقوم بتحديث الموضعين x و y. أخيرًا ، يُمكنك تعيين خاصية النمط للمُكوِّن لوضعه في الموضعين الجديدين x و y. تحقق من أفضل تطبيقات Blockchain التي تم إنشاؤها باستخدام React Native.

الطريقة 2: استخدام وحدة طرف ثالث

إذا كنت لا ترغب في استخدام الميزات المُضمَّنة في React ، فيُمكنك استخدام وحدة طرف ثالث مثل رد الفعل والسحب والإفلات. تُوفر هذه الوحدة غلافًا خاصًا بـ React حول واجهة برمجة تطبيقات السحب والإفلات HTML5.

لاستخدام هذه الوحدة ، تحتاج أولاً إلى تثبيتها باستخدام npm:

npm install react-drag-and-drop — save

بعد ذلك ، يُمكنك استخدامها في مُكوِّنات React الخاصة بك:

import React, { Component } from ‘react’;
import { Draggable, Droppable } from ‘react-drag-and-drop’;
 
class MyComponent extends Component {
 render() {
 return (
 <div>
 <Draggable type=”foo” data=”bar”>
 <div>Drag me!</div>
 </Draggable>
 
 <Droppable types={[‘foo’]} onDrop={this.handleDrop}>
 <div>Drop here!</div>
 </Droppable>
 </div>
 );
 }
 
 handleDrop(data, event) {
 // This method runs when the data drops
 console.log(data); // ‘bar’
 }
}
 
export default MyComponent;

ابدأ باستيراد مُكوِّنات Draggable و Droppable من وحدة رد الفعل والسحب والإفلات. بعد ذلك ، استخدم هذه المُكوِّنات لإنشاء عنصر قابل للسحب وعنصر قابل للإفلات.

يقبل المُكوِّن القابل للسحب خاصية النوع ، والتي تُحدد نوع البيانات التي يُمثلها المُكوِّن ، وخاصية البيانات التي تحدد البيانات المراد نقلها. لاحظ أنَّ النوع هو اسم مُخصص يُمكنك اختياره لتتبع أي مُكوِّن موجود في واجهة مُتعددة المُكوِّنات.

يستخدم مُكوِّن Droppable خاصية الأنواع لتحديد أنواع البيانات التي يُمكنك إسقاطها عليها. يحتوي أيضًا على خاصية onDrop ، والتي تُحدد وظيفة رد الاتصال التي سيتم تشغيلها عند إسقاط أحد المُكوِّنات عليها.

عندما تقوم بإسقاط المُكوِّن القابل للسحب على القرص القابل للإفلات ، سيتم تشغيل طريقة handleDrop. هذا هو المكان الذي يمكنك فيه إجراء أي معالجة تحتاج إلى القيام بها مع البيانات.

نصائح لبناء مُكوِّنات DnD سهلة الاستخدام

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

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

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

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

تحسين تجربة المستخدم مع السحب والإفلات

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

يمكنك أيضًا إضافة رسوم متحركة أخرى في تطبيق React لجعل ميزة السحب والإفلات أكثر تفاعلية وسهولة في الاستخدام. يُمكنك الإطلاع الآن على كيفية تكوين الماوس لاستخدامه بشكل مريح.