برنامه نویسی

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

در ادامه، پیاده سازی کتابخانه dnd-kit از دیدگاه های زیر توضیح داده می شود:

  1. آشنایی اولیه با کتابخانه
  2. اجزای اصلی و قلاب ها را بکشید و رها کنید
  3. اصل اصلی اجرای کشیدن و رها کردن
  4. پشتیبانی و پیاده سازی موبایل
  5. نمونه کد

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;
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا