dnd-kit for react: کشیدن مدرن و سبک

در ادامه، پیاده سازی کتابخانه dnd-kit از دیدگاه های زیر توضیح داده می شود:
- آشنایی اولیه با کتابخانه
- اجزای اصلی و قلاب ها را بکشید و رها کنید
- اصل اصلی اجرای کشیدن و رها کردن
- پشتیبانی و پیاده سازی موبایل
- نمونه کد
1. آشنایی اولیه با کتابخانه
dnd-kit یک کتابخانه مدرن کشیدن و رها کردن است که بر روی React ساخته شده است که بسیار قابل تنظیم و عملکرد است. این به توسعه دهندگان اجازه می دهد تا با ارائه مجموعه ای از اجزای اصلی و قلاب ها، تعاملات پیچیده کشیدن و رها کردن را پیاده سازی کنند.
2. اجزای اصلی و قلاب ها را بکشید و رها کنید
dnd-kit عمدتاً شامل اجزای اصلی و قلاب های زیر است:
- DndContext: این متن تابع کشیدن و رها کردن است.
- استفاده از قابل کشیدن: این یک قلاب است که برای ایجاد عنصری استفاده می شود که می توان آن را کشید.
- استفاده ازDroppable: این یک قلاب است که برای ایجاد ناحیه ای استفاده می شود که عناصر کشیده شده را می پذیرد.
3. اصل اصلی اجرای کشیدن و رها کردن
اصول اصلی اجرای کشیدن و رها کردن شامل مراحل زیر است:
-
مقداردهی اولیه:عبور
DndContext
محیط کشیدن و رها کردن را راه اندازی کنید. -
عناصر را بکشید و رها کنید:استفاده کنید
useDraggable
هوک ها عناصر قابل کشیدن را ایجاد می کنند و کنترل کننده رویداد را برای آنها تنظیم می کنند. -
منطقه قابل جانمایی:استفاده کنید
useDroppable
قلاب ناحیهای ایجاد میکند که میتواند عناصر درگ را بپذیرد و کنترلکنندههای رویداد را برای آن تنظیم میکند. - رسیدگی به رویداد: رویدادهایی مانند کشیدن شروع، کشیدن، کشیدن پایان و غیره و وضعیت به روز رسانی و رابط کاربری را مدیریت کنید.
4. پشتیبانی و پیاده سازی موبایل
dnd-kit با پشتیبانی از رویدادهای لمسی، از عملیات کشیدن و رها کردن موبایل پشتیبانی میکند. مراحل اصلی پیاده سازی عبارتند از:
-
مدیریت رویداد را لمس کنید:مانیتور
touchstart
،touchmove
وtouchend
رویداد، موقعیت لمس را دریافت کنید و حالت کشیدن را به روز کنید. - سازگاری دستگاه لمسی: در مقداردهی اولیه و پردازش رویداد، نوع دستگاه را شناسایی کرده و منطق پردازش رویداد را بر اساس آن تنظیم کنید.
5. نمونه کد
در زیر یک مثال کد اصلی است که نحوه استفاده از dnd-kit برای اجرای یک تابع مرتبسازی ساده کشیدن و رها کردن را نشان میدهد:
import React from 'react';
import { DndContext, useDraggable, useDroppable } from '@dnd-kit/core';
function DraggableItem({ id }) {
const { attributes, listeners, setNodeRef, transform } = useDraggable({
id,
});
const style = {
transform: `translate3d(${transform?.x}px, ${transform?.y}px, 0)`,
};
return (
div ref={setNodeRef} style={style} {...attributes} {...listeners}>
Draggable Item {id}
div>
);
}
function DroppableArea() {
const { setNodeRef } = useDroppable({
id: 'droppable',
});
return (
div ref={setNodeRef} style={{ width: 200, height: 200, background: 'lightgray' }}>
Drop items here
div>
);
}
function App() {
return (
DndContext>
DroppableArea />
DraggableItem id="draggable-1" />
DraggableItem id="draggable-2" />
DndContext>
);
}
export default App;