با سلام و درود، خب از ابتدا خیلی سمت و سوی Front و JavaScript نرفته بودم ولی اخیرا داخل تیممون یه چالشی برای انجام Drag and Drop داشتیم که من هم یه مقدار درگیر این چالش شدم و تصمیم گرفتم تو یک مطلب مختصر ده – ۱۰ تا از کتابخانه های برتر Drag And Drop برای react را معرفی کنم.
ده ها کتابخانه رایگان برای react وجود داره که به شما برای ساخت DragAndDrop کمک می کنند (draggable کردن لیست، کارت ها، جداول و …)
در ابتدا به معرفی یه سری مفاهیم ساده Drag and Drop می پردازیم:
DragDrop Container: جایی که شما داده یا component خود را نگهداری می کنید و روی آن کار می کنید.
Children : محتوای یک dataItem
DragDropContext : مکانی که درگ اند دراپ در آن رُخ می دهد.
Droppable : کامپوننتی که اجازه می دهد کامپوننت های Draggable امکان dropشدن در مکان مورد نظر را داشته باشند.
Draggable: کامپوننتی که باید جایگزین شود، همانند Droppable به یه تعداد ویژگی (Property) برای جابجایی کامپوننت ها نیاز دارد.
onDragStart : این کامپوننت زمانی رُخ می دهد که کاربر شروع به Dragمی کند.
onDragEnd : این کامپوننت به عنوان DragEnd شناخته می شود که زمانی رُخ می دهد که عمل تمام شود.
DataTransfer: کامپوننتی که داده های مرتبط با objectدرگ شده را نگه می دارد.
DropTarget: کامپوننتی که داده های مرتبط با drop را نگه می دارد.
ده کتابخانه برتر DragAndDrop برای React:
۱ – React Beautiful Dnd :
معروف ترین کتابخانه برای ساخت آسان React Drag and Drop lists همین کتابخانه می باشد. در حال حاضر که من این مطلب رو می نویسم حدود 26.8k توسعه دهنده روی GitHubداره.
۲- کتابخانه Draggable :
تنها نکته ای که داره، هیچگونه رفتاری برای Sortکردن نداره. شامل این ماژول هاست: Droppable, Sortable, و
Swappable.
۳- کتابخانه React Grid Layout :
حدود 16k توسعه دهنده روی گیت هاب داره.
۴- کتابخانه React Dropzone:
مثالی ساده از HTML5 drag and drop zone برای react می باشد.
۵- کتابخانه React DND :
15.9k ⭐ستاره روی گیت هاب داره، اساسا برای کمک به TypeScript توسعه داده شده است. البته همانطور که به JavaScript و CSS هم کمک می کند.
۶ – کتابخانه React SortableJS :
معمولا برای لیست های Drag and Drop استفاده می شود.
۷- کتابخانه Interact.js :
۸ – کتابخانه React Kanban :
۹- کتابخانه React Motion :
یکی از قویترین پکیج ها برای فانکشن های انیمیشنی در JS.
۱۰ – کتابخانه React Smooth DnD :
