Magdy Atef Zahran

إزاي تضيف ميزة Drag & Drop في Next.js بدون تعقيد وتوفر تجربة مستخدم رهيبة؟

لو شغال على Dashboard او إدارة ملفات أو عاوز تزود شوية سلاسة في تجربة المستخدم لازم تفكر تستخدم Drag & Drop, تخيل المستخدم يسحب ويفلت الحاجة مكان ما يحب من غير تعقيد ولا أزرار كتير.. طب ازاي تعمله بطريقة احترافية من غير وجع دماغ؟ دا اللي هنشرحه انهارده باذن الله.

أولًا: يعني إيه Drag & Drop؟

باختصار هو إن المستخدم يقدر يسحب عنصر ويحطه في مكان تاني سواء كان رفع ملفات او ترتيب مهام أو فرز بيانات وده بيحسن تجربة المستخدم بشكل رهيب.

ثانيًا: إزاي نطبقه في Next.js؟

هنمشي خطوة بخطوة مع react-dnd مكتبة قوية وسهلة:

1️⃣ تثبيت المكتبة:

افتح الترمينال واكتب:

npm install react-dnd react-dnd-html5-backend

2️⃣ إعداد الـ Drag & Drop Context في الموقع:

📂 components/DndProviderWrapper.js

import { DndProvider } from “react-dnd”; import { HTML5Backend } from “react-dnd-html5-backend”; export default function DndProviderWrapper({ children }) { return {children}; }

3️⃣ إنشاء عنصر قابل للسحب (Draggable Item):

📂 components/DraggableItem.js

import { useDrag } from “react-dnd”; export default function DraggableItem({ id, text }) { const [{ isDragging }, drag] = useDrag(() => ({ type: “ITEM”, item: { id }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), })); return ( <div style=”{{“> {text} </div> ); }

4️⃣ إنشاء منطقة الإسقاط (Drop Area):

📂 components/DropZone.js

import { useDrop } from “react-dnd”; export default function DropZone({ onDrop }) { const [{ isOver }, drop] = useDrop(() => ({ accept: “ITEM”, drop: (item) => onDrop(item.id), collect: (monitor) => ({ isOver: monitor.isOver(), }), })); return ( <div> {isOver ? “سيب العنصر هنا! 🎯” : “اسحب الحاجة وحطها هنا 🏗️”} </div> ); }

5️⃣ دمج المكونات في الصفحة الرئيسية:

📂 pages/index.js

import { useState } from “react”; import DraggableItem from “@/components/DraggableItem”; import DropZone from “@/components/DropZone”; import DndProviderWrapper from “@/components/DndProviderWrapper”; export default function Home() { const [droppedItems, setDroppedItems] = useState([]); const handleDrop = (id) => { setDroppedItems((prev) => […prev, `عنصر ${id} تم إسقاطه! ✅`]); }; return ( <div> <h1>Drag & Drop في Next.js 🔥</h1> <div> </div> <ul> {droppedItems.map((item, i) => ( <li>{item}</li> ))} </ul> </div> ); }

مراجعة سريعة على اللي عملناه:

في الخطوات اللي فاتت، عرفنا إزاي نضيف Drag & Drop في Next.js بطريقة احترافية وبسيطة باستخدام مكتبه react-dnd