پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های پروژه به صورت زیر است.

dragdroplist_starter.zip
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── components
│   │   └── DragDropList.jsx
│   ├── index.css
│   └── main.jsx
└── vite.config.js

ظاهر کلی برنامه به شکل زیر است:

یکی از پرتکرار ترین سوالات مصاحبه‌ای، اعمال یک لیست با قابلیت کشیدن و رهاکردن*(Drag&Drop)* است. این سوال در حال ساده بودن از نظر ظاهری، توانایی‌های یک توسعه‌دهنده را از جهات مختلف به چالش می‌کشد! صورت مسئله به شکل زیر است:

آرایه initialItems

این آرایه شامل پنج آیتم با اسم‌های [Item1, Item2, Item3, Item4, Item5] است که لیست ما باید این آیتم‌ها را به ترتیب نمایش دهد (توجه داشته باشید که شما مجاز به ویرایش اسم این آیتم ها نیستید).

لیست ul

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

نکات

• استایل‌های این کامپوننت نوشته شده و شما فقط باید لاجیک آن را اعمال کنید.
• از حذف یا ویرایش data-testid های داده شده خودداری کنید.
• شما مجاز به نصب کتابخانه‌های خارجی از جمله npm نیستید.
• شما فقط مجاز به اعمال تغییرات در DragDropList.jsx هستید.
• می‌توانید فایل DragDropList.jsx را بعد از اعمال تغییرات به صورت مستقیم برای ما ارسال کنید.

آنچه باید آپلود کنید

فایل DragDropList.jsx نهایی را ذخیره کنید و به‌صورت تکی آپلود کنید. یا اگر قصد دارید به‌صورت فایل فشرده ارسال کنید، ساختار فایل باید به‌صورت زیر باشد:

dragdroplist_starter.zip
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── components
│   │   └── DragDropList.jsx
│   ├── index.css
│   └── main.jsx
└── vite.config.js