راهنمای مبتدی برای کشیدن و رها کردن با کیت DND در React

عملکرد کشیدن و رها کردن می تواند با اجازه دادن عناصر به صورت پویا در یک UI ، تعامل کاربر را تقویت کند. در این راهنما ، ما نحوه پیاده سازی Drag-and-Drop را با استفاده از آن بررسی خواهیم کرد کیت DND، یک کتابخانه واکنش سبک و انعطاف پذیر.

🏗 چرا از کیت DND استفاده می کنید؟

DND کیت ارائه می دهد:

✅ مدرن ، شما API برای کشیدن و قطره.

✅ سبک وزن (کوچکتر از گزینه های جایگزین مانند React-Beautiful-DND).

✅ پشتیبانی صفحه کلید برای دسترسی

✅ سنسورهای قابل تنظیم (ماوس ، لمس و صفحه کلید).

بیایید به راه اندازی و پیاده سازی شیرجه بزنیم!

🚀 تنظیم کیت DND

ابتدا کیت DND را نصب کنید:

npm install @dnd-kit/core

یا با نخ:

yarn add @dnd-kit/core


🛠 مثال اصلی کشیدن و رها کردن

ما یک مثال ساده ایجاد خواهیم کرد که کاربران می توانند موارد بین دو لیست را بکشید و رها کنند.

1⃣ تنظیم زمینه

در کیت DND ، ما برنامه خود را با DNDContext می پیچیم ، که مدیریت وقایع کشیدن و رها کردن است.

import React, { useState } from "react";
import { DndContext } from "@dnd-kit/core";

function App() {
  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);

  return (
    
      

        {items.map((item, index) => (
          
{item}
        ))}
      
    
  );
}

export default App;

در این مرحله ، هنوز هیچ چیز قابل کشیدن نیست. در مرحله بعد ، ما موارد را قابل کشش خواهیم داشت.

2⃣ ساخت وسایل قابل کشیدن

برای ساخت موارد قابل کشیدن ، ما از @dnd-kit/core استفاده شده استفاده می کنیم.

import { useDraggable } from "@dnd-kit/core";

function DraggableItem({ id, children }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id,
  });

  const style = {
    transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
  };

  return (
    

      {children}
    
  );
}

سپس ، App.js را به روز کنید تا از DragGableItem استفاده کنید:

  {items.map((item, index) => (
    
      {item}
    
  ))}

اکنون ، موارد را می توان کشید اما هنوز رها نشده است!

3 ⃣ فعال کردن مناطق قابل قطره

برای رها کردن موارد ، از قلاب قابل استفاده استفاده کنید:

import { useDroppable } from "@dnd-kit/core";

function DroppableArea({ id, children }) {
  const { setNodeRef } = useDroppable({ id });

  return (
    

      {children}
    
  );
}

DraggableItem را درون Droppablearea بسته بندی کنید:

  
    {items.map((item, index) => (
      
        {item}
      
    ))}
  

4⃣ رسیدگی به رویدادهای کشیدن

برای به روزرسانی حالت هنگام کاهش یک مورد ، از ondragend در داخل dndcontext استفاده کنید:

function App() {
  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);

  function handleDragEnd(event) {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setItems((prev) => {
        const updatedItems = [...prev];
        const [movedItem] = updatedItems.splice(active.id, 1);
        updatedItems.splice(over.id, 0, movedItem);
        return updatedItems;
      });
    }
  }

  return (
    
      
        {items.map((item, index) => (
          
            {item}
          
        ))}
      
    
  );
}

اکنون ، هنگامی که یک مورد از بین رفته است ، لیست به صورت پویا به روز می شود! 🎉

🎨 یک ظاهر طراحی اثر کشیدن

برای تقویت UI ، سبک ها را اعمال کنید:

.draggable {
  padding: 10px;
  margin: 5px;
  background: #f4f4f4;
  border-radius: 5px;
  cursor: grab;
}

🔥 ویژگی های پیشرفته ای برای کشف

• Sorting Lists → @dnd-kit/sortable
• Drag Constraints → Limit draggable areas
• Custom Animations → Smooth transitions
• Keyboard Accessibility → Improve usability

🏁 بسته شدن

DND Kit یک راه حل سبک و انعطاف پذیر برای اضافه کردن برنامه های Rec-and-Drop به برنامه های React است. با استفاده از DNDContext ، استفاده شده و قابل استفاده ، می توانید رابط های تعاملی و در دسترس را با حداقل تلاش ایجاد کنید.

🚀 آن را در پروژه بعدی خود امتحان کنید!

💬 س questions ال دارید؟ نظر زیر را رها کنید!

💡 اگر این موضوع را مفید پیدا کردید ، آن را به اشتراک بگذارید و مرا برای محتوای واکنش بیشتر دنبال کنید! 🚀