הוסף גרור & Drop לאתר בקלות עם

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

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

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

אם אתה לוקח להציץ הדגמה חיה תמצאו מספר קטעי קוד, ביחד עם דוגמאות שמיש.

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

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

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

הנה דוגמה אחת מהמסמכים של GitHub כיצד לכוון את שני (מימין ומשמאל) מכולותYou

 Dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); 

שים לב אם תסתכל נוסף בדף GitHub תמצא רשימה ענקית של אפשרויות אתה יכול לעבור לפונקציה זו.

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

• מרחף מעל מכולה
• אירוע קליק וגרור ראשוני
• אירוע ירידה
• הטלת אלמנט מחוץ לתחום
• שיבוט אלמנט / גורם מכיל על ידי גרירה

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

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