کتابخانه react-beautiful-dnd برای پیاده سازی Drag & Drop در ری اکت !
کتابخانه react-beautiful-dnd به ما اجازه میده تو اپیکیشن ری اکتی خودمون حالت Drag & Drop اِلِمان هارو پیاده سازی کنیم. یعنی اِلِمان های دلخواه خودمون رو با موس بگیریم و در جایی دیگه رها کنیم! قطعا اگه بخوایم بدون کتابخانه های خارجی اینکار رو انجام بدیم باید روزها زمان صرف این پیاده سازی این ویژگی کنیم اما به کمک کتابخانه react-beautiful-dnd میتونیم تو چند دقیقه این ویژگی جذاب رو به اپیکیشن خودمون اضافه کنیم ..
پس اگه قصد پیاده سازی حالت Drag & Drop در ری اکت رو دارید، با فِرانت اِندی همراه باشید …
بیش از 1.5 میلیون دانلود هفتگی در npm !
کتابخانه react-beautiful-dnd چیست ؟
کتابخانه react-beautiful-dnd یکی از بهترین کتابخانه ها جهت پیاده سازی حالت Drag & Drop در ری اکت هست که هم جامعه آماری خیلی خوبی داره و هم استفاده ازش آسونه!
درواقع کتابخانه های خیلی زیادی در ری اکت در زمینه پیاده سازی Drag & Drop یا همون DND به ما کمک میکنن اما هیچکدوم به خوبی کتابخانه react-beautiful-dnd نیستن!
حالت Drag & Drop در ری اکت !
خیلی وقتا نیاز داریم که کاربر یک یا چند اِلِمان رو Drag کنه و در جاهایی که مشخص شده Drop کنه! اگه بخوایم چنین ویژگی رو بدون کتابخانه های خارجی پیاده سازی کنیم قطعا کلی زمان باید صرف کنیم اما کتابخانه react-beautiful-dnd کمک میکنه تو چند دقیقه این کار رو انجام بدیم 🙂
آموزش کتابخانه React-Beautiful-Dnd در ری اکت
استفاده از این کتابخانه خیلی خیلی سادس !
اولین و مهمترین نکته ای که باید درمورد کتابخانه react-beautiful-dnd بدونیم، این هست که این کتابخانه، 3 کامپوننت اصلی در اختیار ما میزاره :
کامپوننت DragDropContext
کل ناحیه ای که ویژگی Drag & Drop داره رو مشخص میکنه.
کامپوننت Droppable
ناحیه ای رو مشخص میکنه که اِلِمان ها میتونن داخل این ناحیه Drop ( رها ) بشن.
کامپوننت Draggable
اِلِمان هایی که قابلیت Drag شدن دارن رو مشخص میکنه.
اگه به مثال زیر دقت کنید، عملکرد 3 کامپوننت بالارو متوجه میشید :
خب دیگه مباحث تئوری کافیه 🙂 بریم سراغ نصب و استفاده از کتابخانه react-beautiful-dnd در ری اکت ..
نصب کتابخانه React-Beautiful-Dnd چطوریه ؟
برای نصب کتابخانه react-beautiful-dnd روی پروژه فعلی خودمون، دستور زیر رو در ترمینال وارد کنید :
npm i --save react-beautiful-dnd
بعد چند لحظه این کتابخانه برای ما نصب میشه.
حالا برای اینکه بتونیم به بررسی react-beautiful-dnd بپردازیم، فایل App.js رو بصورت زیر در بیارید :
// Filename : App.jsx
import './App.css';function App() {
return (
<div className="App">
<header className="frontendi-com">
<h4>Hands on React-Beautiful-DND</h4>
</header>
</div>
);
}
export default App;
حالا بیاید یه کامپوننت بسازیم که داخلش یک لیست از آیتم هارو render میکنیم و نمایش میدیم. درآینده این کامپوننت رو قابل Drag & Drop میکنیم .. من اسم این کامپوننت رو ListComponent.jsx میزارم :
// Filename : ListComponent.jsx
import React from 'react';
export function ListComponents({Marvel, DC}) {
return (
<div style={{ width: '100%', display: 'flex' }}>
<div style={{ width: '25%', margin: 'auto' }}>
<ul style={{ listStyleType: 'none', textAlign: 'left' }} >
<h6>Marvel SuperHeroes</h6>
{Marvel.map((data, index) => (
<li key={index}>
{data}
</li>
))}
</ul>
</div>
<div style={{ width: '25%', margin: 'auto' }}>
<ul style={{ listStyleType: 'none', textAlign: 'left' }}>
<h6>DC SuperHeroes</h6>
{DC.map((data, index) => (
<li key={index}>
{data}
</li>
))}
</ul>
</div>
</div>
)}
تو کامپوننت بالا ما از متد map استفاده کردیم و روی 2 آرایه map زدیم. این آرایه ها Marvel و DC هستن ..
حالا که کامپوننت بالارو ساختیم، میتونیم تو کامپوننت App.js ازش استفاده کنیم.
ما میخوایم کامپوننت ListComponents رو داخل App نمایش بدیم.
باید کامپوننت App.js رو بصورت زیر تغییر بدیم :
// FileName: App.js
import './App.css';// importing components from another files
import { ListComponents } from "./ListComponent";
function App() {// List 1 consisting of all MARVEL super heroes
const list1 = ['Captain America', 'Iron Man', 'SpiderMan', 'Thor', 'Hulk', 'Black Widow', 'Loki', 'Black Panther', 'Deadpool', 'Doctor Strange', 'Ant Man', 'Captain Marvel']// List 2 consisting of all DC super heroes
const list2 = ['BatMan', 'SuperMan', 'Wonder Woman', 'Flash', 'Green Lantern', 'AquaMan', 'Robin', 'Cyborg', 'StarFire', 'HawkGirl', 'Shazam', '']return (
<div className="App">
<header className="App-header">
<h4>Hands on React-Beautiful-DND</h4>
<ListComponents Marvel={list1} DC={list2} />
</header>
</div>
);
}
export default App;
کامپوننت بالا، کامپوننت App هست. تو خط 3، کامپوننت ListComponents رو فراخوانی کردیم و در خط 11 نمایشش دادیم.
کامپوننت ListComponents نیاز به 2 آرایه داره که این آرایه ها در خط 6 و 7 تعریف شدن.
حالا که کامپوننت ListComponents رو داخل App.js نمایش دادیم، خروجی ما بصورت زیر میشه :
ما میخوایم لیست هایی که در خروجی بالا نمایش داده شدن، قابلیت Drag & Drop داشته باشن..
خب تا به اینجای کار از کتابخانه react-beautiful-dnd استفاده ای نکردیم، حالا بیاید کامپوننت های خودمون رو قابل Drag & Drop کنیم ..
درواقع ما الان 2 لیست از آیتم رو داریم و میخوایم کاری کنیم که آیتم های لیست ما قابل Drag و Drop باشن.
قدم اول – استفاده از DragDropContext
تو مرحله اول باید وارد App.js بشیم و کامپوننت DragDropContext رو از کتابخانه react-beautiful-dnd فراخوانی کنیم. سپس کل App رو داخل DragDropContext قرار بدیم.
در حقیقت باید کامپوننت Draggable رو Droppable خودمون رو داخل DragDropContext قرار بدیم.
یعنی کامپوننت App.js باید بصورت زیر تغییر پیدا کنه :
// FileName: App.jsimport './App.css';
import React from 'react';// importing components from another files
import { ListComponents } from "./ListComponent";// imports related to DND
import { DragDropContext } from 'react-beautiful-dnd';function App() { // List 1 consisting of all MARVEL super heroes
const [list1, setList1] = React.useState(['Captain America', 'Iron Man', 'SpiderMan', 'Thor', 'Hulk', 'Black Widow', 'Loki', 'Black Panther', 'Deadpool', 'Doctor Strange', 'Ant Man', 'Captain Marvel']) // List 2 consisting of all DC super heroes
const [list2, setList2] = React.useState(['BatMan', 'SuperMan', 'Wonder Woman', 'Flash', 'Green Lantern', 'AquaMan', 'Robin', 'Cyborg', 'StarFire', 'HawkGirl', 'Shazam']) // Function for deleting items from list using index
const deleteItem = (list, index) => {
return list.splice(index, 1)
} // Function called when Drag Ends
const onDragEnd = (result) => {
// getting the source and destination object
const { source, destination } = result
if (!destination)
return;
if (source.droppableId === destination.droppableId) {
if (source.droppableId === "Marvel_drop_area") {
let tempList = list1
const removed = deleteItem(tempList, source.index)
tempList.splice(destination.index, 0, removed)
setList1(tempList)
}
else {
let tempList = list2
const removed = deleteItem(tempList, source.index)
tempList.splice(destination.index, 0, removed)
setList2(tempList)
}
} else {
let tempList1 = list1
let tempList2 = list2
if (source.droppableId === "Marvel_drop_area") {
const removed = deleteItem(tempList1, source.index)
tempList2.splice(destination.index, 0, removed)
setList1(tempList1)
setList2(tempList2)
} else {
const removed = deleteItem(tempList2, source.index)
tempList1.splice(destination.index, 0, removed)
setList1(tempList1)
setList2(tempList2)
}
}
}return (
<DragDropContext onDragEnd={onDragEnd}>
<div className="App">
<header className="App-header">
<h4>Hands on React-Beautiful-DND</h4>
<ListComponents Marvel={list1} DC={list2} />
</header>
</div>
</DragDropContext>
)
}
export default App;
تو خط 44، اومدیم کل ListComponens رو داخل DragDropContext قرار دادیم. اگه دقت کنید میبینید که یک Props به اسم onDragEnd بهش پاس دادیم.
در حقیقت onDragEnd عملیات مرتب سازی، افزودن و حذف آیتم های قابل درگ و دراپ رو مدیریت میکنه.
حالا که از DragDropContext استفاده کردیم، بریم کامپوننت های قابل درگ ( Draggable ) و کامپوننت های قابل دراپ ( Droppable ) خودمون رو بسازیم.
در ابتدا باید وارد فایل ListComponent.js بشیم و کامپوننت Draggable و Droppable رو از کتابخانه react-beautiful-dnd فراخوانی کنیم.
کامپوننت Draggable باید داخل Droppable باشه!
کامپوننت Droppable مشخص میکنه در چه مکانی ما میتونیم اِلِمان های خودمون رو Drop کنیم ( رها کنیم ).
هر اِلِمان قابل Drop باید یک شناسه یکتا داشته باشه.
کامپوننت Droppable ویژگی های زیر رو میتونه از ما بگیره :
ویژگی provided.innerRef :
یک رفرنس به اِلِمان ما که داخل DOM قرار داره.
ویژگی provided.droppableProps :
برای ویژگی Drag & Drop یکسری استایل پیشفرض اعمال میکنه.
ویژگی provided.placeholder :
یک فضای اضافه به آیتم قابل Drop اضافه میکنه.
ویژگی snapshop :
اجازه میده استایل شرطی به اِلِمان قابل Drag و Drop خودمون بدیم.
بعد import کردن کامپوننت های Droppable و Draggable در فایل ListComponent ، فایل ما باید بصورت زیر باشه :
// Filename : ListComponent.jsx
import React from 'react';// imports related to DND
import { Droppable, Draggable } from 'react-beautiful-dnd';
export function ListComponents({ Marvel, DC }) {
const getListStyle = isDraggingOver => ({
background: isDraggingOver ? "lightblue" : "darkgrey",
width: '21%',
margin: 'auto',
});
const getItemStyle = (isDragging, draggableStyle) => ({
userSelect: "none",
background: isDragging ? "darkgrey" : "white",
color: isDragging ? "white" : "black",
padding: isDragging ? '0%' : '2%',
paddingLeft: '2%',
margin: '0%',
fontSize: '17px',
borderBottom: '0.5px solid gray',
// styles we need to apply on draggables
...draggableStyle
}); return (
<div style={{ width: '100%', display: 'flex' }}>
<Droppable droppableId="Marvel_drop_area" >
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
<ul style={{ listStyleType: 'none', textAlign: 'left', padding: '0%', width: '100%' }} >
<h6 style={{ paddingLeft: '2%' }}>Marvel SuperHeroes</h6> {Marvel.map((data, index) => (
<Draggable key={data}
draggableId={`${data}${index}`} index={index}>
{(provided, snapshot) => (
<li
key={index}
ref={provided.innerRef}
...provided.draggableProps}
...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{data}
</li>
)}
</Draggable>
))}
</ul>
{provided.placeholder}
</div>
)}
</Droppable>
<Droppable droppableId="DC_drop_area" >
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
<ul style={{ listStyleType: 'none', textAlign: 'left', padding: '0%', width: '100%' }} >
<h6 style={{ paddingLeft: '2%' }}>DC SuperHeroes</h6>
{DC.map((data, index) => (
<Draggable key={data} draggableId={`${data}${index}`} index={index}>
{(provided, snapshot) => (
<li
key={index}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{data}
</li>
)}
</Draggable>
))}
</ul>
{provided.placeholder}
</div>
)}
</Droppable>
</div>
)
}
نتیجه تیکه کد بالا، خروجی زیر میشه :
همونطور که تو خروجی بالا میشه دید، کل لیست ما قابل Drag شده و امکان Drop شدن آیتم ها وجود داره 🙂
چی از این بهتر 🙂
طبق این آموزش کتابخانه react-beautiful-dnd میتونیم در ری اکت کامپوننت های خودمون رو قابل Drag و Drop کنیم 🙂
کتابخانه react-beautiful-dnd جامعه آماری خوبی داره ؟
بله، الان که من این مقاله رو دارم مینویسم، این کتابخانه حدود 1.5 میلیون دانلود هفتگی در NPM داره !
جمع بندی
ما دیدیم که کتابخانه react-beautiful-dnd در React به ما در زمینه ساخت کامپوننت ها و اِلِمان های قابل Drag و Drop کمک میکنه، یعنی کاربر میتونه اِلِمان های داخل صفحات رو با موس بکشه و در جایی دیگه رها کنه.
اگه قصد پیاده سازی حالت Drag & Drop در ریکت رو دارید، حتما از این کتابخانه استفاده کنید.
راستی اگه تازه شروع به یادگیری کتابخانه ری اکت کردید، پیشنهاد میکنم حتما نیم نگاهی به مسیر یادگیری ری اکت بندازید 🙂
کتابخانه react-beautiful-dnd به ما اجازه میده کامپوننت ها و اِلِمان های خودمون رو قابل Drag و Drop کنیم . ( یعنی کاربر اِلِمان هارو با موس بکشه و در جای دیگه رها کنه ).
این کتابخانه در React کاربرد داره.
اصلا ! پیاده سازی حالت Drag & Drop در ریکت به کمک این کتابخانه خیلی آسونه.
ما خیلی مختصر به آموزش react-beautiful-dnd پرداختیم و ویژگی های اون رو با ذکر مثال بررسی کردیم.
از جمله بررسی کامپوننت های :
DragDropContext
Draggable
Droppable
دیدگاهتان را بنویسید