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

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

היסודות של גרירה ושחרור ב-HTML

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

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

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

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

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

instagram viewer
דראגסטארט גרור מאזין אירועים כך:

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 לשיטה יש שלושה פרמטרים. הפרמטר הראשון מתייחס לתמונה. שאר הפרמטרים מייצגים את ההיסט האופקי והאנכי של התמונה בהתאמה. כאשר תפעילו את הקוד בדפדפן ותתחילו לגרור אלמנט, תבחינו שתמונת הגרירה המותאמת אישית הוחלפה בתמונה המותאמת אישית שהוגדרה קודם לכן.

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

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

הבנת ממשק DragEvent

JavaScript תכונות א DragEvent ממשק המייצג אינטראקציה של גרירה ושחרור מהמשתמש. להלן רשימה של סוגי אירועים אפשריים תחת DragEvent מִמְשָׁק.

  • לִגרוֹר: המשתמש יורה אירוע זה תוך כדי גרירת אלמנט.
  • dragend: אירוע זה מופעל כאשר פעולת הגרירה מסתיימת או כאשר המשתמש מפריע לה. פעולת גרירה טיפוסית יכולה להסתיים על ידי שחרור לחצן העכבר או לחיצה על מקש ה-Escape.
  • dragenter: אלמנט שנגרר מפעיל אירוע זה כאשר הוא נכנס ליעד שחרור חוקי.
  • dragleave: כאשר האלמנט הנגרר עוזב יעד שחרור, אירוע זה יופעל.
  • גראובר: כאשר המשתמש גורר אלמנט הניתן לגרירה מעל יעד שחרור, האירוע מופעל.
  • דראגסטארט: האירוע מופעל בתחילת פעולת גרירה.
  • יְרִידָה: המשתמש מפעיל אירוע זה כאשר הוא מפיל אלמנט על יעד שחרור.

בעת גרירת קובץ לדפדפן מסביבה מחוץ לדפדפן (לדוגמה, מנהל הקבצים של מערכת ההפעלה), הדפדפן אינו מפעיל את דראגסטארט אוֹ dragend אירועים.

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

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

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

הטיעון השני הוא אובייקט עם a העברת נתונים מפתח המייצג מופע של העברת נתונים, עליו תלמדו עוד בהמשך מדריך זה. לאחר מכן, קח את האלמנט שממנו אתה רוצה להפעיל את האירוע, מה- מודל אובייקט מסמך (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);

העברת נתונים באמצעות העברת נתונים

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

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

שימוש ב-setData() ל-Package Data

כדי להעביר נתונים מאלמנט הניתן לגרירה לרכיב שניתן לשחרר, תשתמש ב- setData() שיטה שסופקה על ידי העברת נתונים לְהִתְנַגֵד. שיטה זו מאפשרת לך לארוז את הנתונים שברצונך להעביר ולציין את סוג הנתונים. הנה דוגמה בסיסית:

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

כאשר משתמש מתחיל לגרור את האלמנט שצוין, setData() מארז את הטקסט "שלום, עולם!" עם סוג הנתונים טקסט/רגיל. נתונים אלה משויכים כעת לאירוע הגרירה וניתן לגשת אליהם על ידי היעד הניתן להורדה במהלך פעולת השחרור.

אחזור נתונים באמצעות getData()

בצד המקבל, בתוך מאזין האירועים של רכיב שניתן להפיל, אתה יכול לאחזר את הנתונים המועברים באמצעות getData() שיטה:

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

בלוק הקוד למעלה מאחזר את הנתונים עם אותו סוג נתונים (טקסט/רגיל) שהוגדר באמצעות ה- setData() שיטה קודם לכן. זה מאפשר לך לגשת ולתפעל את הנתונים המועברים לפי הצורך בתוך ההקשר של הרכיב הניתן להורדה.

שימוש במקרים עבור ממשקי גרירה ושחרור

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

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

הקפדה על נגישות

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