קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.

האם אי פעם רצית להוסיף פונקציונליות של גרירה ושחרור לרכיבי React שלך? זה לא כל כך קשה כמו שאתה יכול לחשוב.

גרירה ושחרור היא דרך להזיז או לתפעל אלמנטים במסך באמצעות עכבר או משטח מגע. זה מושלם לסידור מחדש של רשימת פריטים או העברת פריטים מרשימה אחת לאחרת.

אתה יכול לבנות רכיבי גרירה ושחרור ב-React באמצעות אחת משתי השיטות: תכונות מובנות או מודול של צד שלישי.

דרכים שונות ליישם גרירה ושחרור ב-React

ישנן שתי דרכים ליישם גרירה ושחרור ב-React: שימוש בתכונות המובנות של React, או שימוש במודול של צד שלישי. התחל על ידי יצירת אפליקציית React, ולאחר מכן בחר את השיטה המועדפת עליך.

שיטה 1: שימוש בתכונות מובנות

ב-React, אתה יכול להשתמש באירוע onDrag כדי לעקוב אחר מתי המשתמש גורר אלמנט, ובאירוע onDrop כדי לעקוב אחר מתי הוא משחרר אותו. אתה יכול גם להשתמש באירועי onDragStart ו-onDragEnd כדי לעקוב אחר מתי הגרירה מתחילה ומפסיקה.

כדי להפוך אלמנט לגרירה, אתה יכול להגדיר את תכונת הגרירה ל-true. לדוגמה:

יְבוּא תגובה, { רכיב } 





instagram viewer


מ 'לְהָגִיב';
מעמדMyComponentמשתרערְכִיב{
 render() {
לַחֲזוֹר (
<div
 ניתן לגרירה
 onDragStart={זֶה.handleDragStart}
 onDrag={זֶה.handleDrag}
 onDragEnd={זֶה.handleDragEnd}
>
 גרור אותי!
</div>
 );
 }
}
יְצוּאבְּרִירַת מֶחדָל MyComponent;

כדי להפוך אלמנט לאפשרי, אתה יכול ליצור את השיטות handleDragStart, handleDrag ו-handleDragEnd. שיטות אלו יפעלו כאשר משתמש גורר את האלמנט וכאשר הוא משחרר אותו. לדוגמה:

יְבוּא תגובה, { רכיב } מ 'לְהָגִיב';
מעמדMyComponentמשתרערְכִיב{
 handleDragStart (אירוע) {
// שיטה זו פועלת כאשר הגרירה מתחילה
 console.log("התחיל")
 }


handleDrag (אירוע) {
// שיטה זו פועלת כאשר הרכיב נגרר
 console.log("גְרָר...")
 }


handleDragEnd (אירוע) {
// שיטה זו פועלת כאשר הגרירה נפסקת
 console.log("הסתיים")
 }


render() {
לַחֲזוֹר (
<div
 ניתן לגרירה
 onDragStart={זֶה.handleDragStart}
 onDrag={זֶה.handleDrag}
 onDragEnd={זֶה.handleDragEnd}
>
 גרור אותי!
</div>
 );
 }
}
יְצוּאבְּרִירַת מֶחדָל MyComponent;

בקוד לעיל, קיימות שלוש שיטות לטיפול בגרירה של אלמנט: handleDragStart, handleDrag ו-handleDragEnd. ל-div יש תכונה ניתנת לגרירה והוא מגדיר את המאפיינים onDragStart, onDrag ו-onDragEnd לפונקציות המתאימות להם.

כאשר תגרור את האלמנט, שיטת handleDragStart תפעל תחילה. זה המקום שבו אתה יכול לבצע כל הגדרה שאתה צריך לעשות, כגון הגדרת הנתונים להעברה.

לאחר מכן, שיטת handleDrag פועלת שוב ושוב תוך כדי גרירת האלמנט. זה המקום שבו אתה יכול לבצע כל עדכונים כמו התאמת המיקום של האלמנט.

לבסוף, כאשר אתה משחרר את האלמנט, שיטת handleDragEnd פועלת. זה המקום שבו אתה יכול לבצע כל ניקוי שאתה צריך לעשות, כגון איפוס הנתונים שהעברת.

אתה יכול גם להזיז את הרכיב על המסך ב-onDragEnd(). כדי לעשות זאת, תצטרך להגדיר את מאפיין הסגנון של הרכיב. לדוגמה:

יְבוּא React, { Component, useState } מ 'לְהָגִיב';
פוּנקצִיָהMyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);


const handleDragEnd = (אירוע) => {
setX(מִקרֶה‎.clientX);
setY(מִקרֶה.clientY);
 };


לַחֲזוֹר (
<div
 ניתן לגרירה
 onDragEnd={handleDragEnd}
 style={{
 עמדה: "מוּחלָט",
 שמאל: x,
 למעלה: y
 }}
>
 גרור אותי!
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל MyComponent;

הקוד קורא ל-useState hook כדי לעקוב אחר מיקום ה-x וה-y של הרכיב. לאחר מכן, בשיטת handleDragEnd, הוא מעדכן את מיקום x ו-y. לבסוף, אתה יכול להגדיר את מאפיין הסגנון של הרכיב כדי למקם אותו במיקומי x ו-y החדשים.

שיטה 2: שימוש במודול של צד שלישי

אם אינך רוצה להשתמש בתכונות המובנות של React, אתה יכול להשתמש במודול של צד שלישי כגון להגיב-גרור-ושחרר. מודול זה מספק מעטפת ספציפית ל-React סביב ממשק ה-API של גרירה ושחרור של HTML5.

כדי להשתמש במודול זה, תחילה עליך להתקין אותו באמצעות npm:

npm להתקין תגובה-גרור-ו-יְרִידָה--להציל

לאחר מכן, אתה יכול להשתמש בו ברכיבי React שלך:

יְבוּא תגובה, { רכיב } מ 'לְהָגִיב';
יְבוּא { ניתן לגרירה, לשחרר } מ 'להגיב-גרור-ושחרר';
מעמדMyComponentמשתרערְכִיב{
 render() {
לַחֲזוֹר (
<div>
<סוג ניתן לגרירה="פו" נתונים="בַּר">
<div>גרור אותי!</div>
</Draggable>


<סוגים ניתנים להורדה={['פו']} onDrop={this.handleDrop}>
<div>זרוק כאן!</div>
</Droppable>
</div>
 );
 }


handleDrop (נתונים, אירוע) {
// שיטה זו פועלת כאשר הנתונים יורדים
לְנַחֵם.log (נתונים); // 'בר'
 }
}
יְצוּאבְּרִירַת מֶחדָל MyComponent;

התחל על ידי ייבוא ​​הרכיבים הניתנים לגרירה ושחרור מהמודול תגובה-גרור ושחרר. לאחר מכן, השתמש ברכיבים אלה כדי ליצור אלמנט הניתן לגרירה ורכיב הניתן לשחרור.

הרכיב Draggable מקבל אבזר סוג, המציין את סוג הנתונים שהרכיב מייצג, ואביזר נתונים שמציין את הנתונים להעברה. שים לב שהסוג הוא שם מותאם אישית שאתה יכול לבחור כדי לעקוב אחר איזה רכיב הוא איזה בממשק מרובה רכיבים.

הרכיב ל-Dropable משתמש ב-types כדי לציין את סוגי הנתונים שתוכלו לשחרר עליו. יש לו גם משענת onDrop, שמציינת את פונקציית ה-callback שתפעל כאשר תפיל עליו רכיב.

כאשר אתה משחרר את הרכיב הניתן לגרירה על הרכיב הניתן לשחרור, שיטת handleDrop תפעל. זה המקום שבו אתה יכול לעשות כל עיבוד שאתה צריך לעשות עם הנתונים.

טיפים לבניית רכיבי DnD ידידותיים למשתמש

יש כמה דברים שאתה יכול לעשות כדי להפוך את רכיבי הגרירה והשחרור שלך לידידותיים יותר למשתמש.

ראשית, עליך לספק משוב ויזואלי כאשר אלמנט נגרר. לדוגמה, תוכל לשנות את האטימות של האלמנט, או להוסיף גבול. כדי להוסיף אפקטים חזותיים אתה יכול להשתמש ב-CSS רגיל או tailwind CSS באפליקציית React שלך.

שנית, עליך לוודא שהמשתמשים שלך יכולים לגרור את הרכיב רק ליעד שחרור חוקי. לדוגמה, אתה יכול להוסיף את סוגים תכונה לאלמנט, המציינת את סוגי הרכיבים שהוא יקבל.

שלישית, עליך לספק למשתמש דרך לבטל את פעולת הגרירה והשחרור. לדוגמה, תוכל להוסיף כפתור המאפשר למשתמש לבטל את הפעולה.

שפר את חווית המשתמש באמצעות גרירה ושחרור

תכונת הגרירה והשחרור לא רק עוזרת לשפר את חווית המשתמש, אלא גם יכולה לעזור בביצועים הכוללים של יישום האינטרנט שלך. משתמש יכול כעת לארגן מחדש בקלות את הסדר של נתונים מסוימים מבלי לרענן את הדף או לעבור מספר שלבים.

אתה יכול גם להוסיף אנימציות אחרות באפליקציית React שלך כדי להפוך את תכונת הגרירה והשחרור לאינטראקטיבית וידידותית יותר למשתמש.