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

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

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

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

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

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

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

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

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

يستورد رد فعل ، {مكون} من





instagram viewer

 'تتفاعل'؛
فصلMyComponentيمتدعنصر{
 يجعل() {
يعود (
<شعبة
 جر
 onDragStart = {هذا.handleDragStart}
 onDrag = {هذا.handleDrag}
 onDragEnd = {هذا.handleDragEnd}
>
 جرني!
</div>
 );
 }
}
يصدّرتقصير MyComponent؛

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

يستورد رد فعل ، {مكون} من 'تتفاعل'؛
فصلMyComponentيمتدعنصر{
 handleDragStart (حدث) {
// تعمل هذه الطريقة عند بدء السحب
 console.log ("بدأت")
 }


handleDrag (حدث) {
// تعمل هذه الطريقة عندما يتم سحب المكون
 console.log ("سحب...")
 }


handleDragEnd (حدث) {
// تعمل هذه الطريقة عند توقف السحب
 console.log ("انتهى")
 }


يجعل() {
يعود (
<شعبة
 جر
 onDragStart = {هذا.handleDragStart}
 onDrag = {هذا.handleDrag}
 onDragEnd = {هذا.handleDragEnd}
>
 جرني!
</div>
 );
 }
}
يصدّرتقصير MyComponent؛

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

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

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

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

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

يستورد React، {Component، useState} من 'تتفاعل'؛
وظيفةMyComponent() {
مقدار ثابت [x، setX] = useState (0);
مقدار ثابت [y، setY] = useState (0);


مقدار ثابت handleDragEnd = (حدث) => {
setX(حدث.clientX);
مجموعة ص(حدث.clientY);
 };


يعود (
<شعبة
 جر
 onDragEnd = {handleDragEnd}
 النمط = {{
 موضع: "مطلق",
 اليسار: x ،
 أعلى: ذ
 }}
>
 جرني!
</div>
 );
}
يصدّرتقصير MyComponent؛

يستدعي الرمز الخطاف useState لتتبع موقعي x و y للمكون. ثم ، في طريقة handleDragEnd ، تقوم بتحديث الموضعين x و y. أخيرًا ، يمكنك تعيين خاصية النمط للمكون لوضعها في الموضعين الجديدتين x و y.

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

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

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

npm ثَبَّتَ رد فعل السحب-و-يسقط--يحفظ

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

يستورد رد فعل ، {مكون} من 'تتفاعل'؛
يستورد {قابل للسحب ، قابل للإفلات} من "رد فعل السحب والإفلات" ؛
فصلMyComponentيمتدعنصر{
 يجعل() {
يعود (
<شعبة>
<نوع قابل للسحب ="فو" البيانات ="حاجِز">
<شعبة>جرني!</div>
</Draggable>


<أنواع قابلة للإفلات = {['فو']} onDrop = {this.handleDrop}>
<شعبة>أفلت هنا!</div>
</Droppable>
</div>
 );
 }


handleDrop (بيانات ، حدث) {
// تعمل هذه الطريقة عندما تنخفض البيانات
وحدة التحكم.تسجيل البيانات)؛ // 'حاجِز'
 }
}
يصدّرتقصير MyComponent؛

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

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

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

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

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

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

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

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

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

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

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

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