# پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/76600/download_problem_initial_project/265354/) دانلود کنید. ساختار فایل‌های پروژه به صورت زیر است. ``` dragdroplist_starter.zip ├── eslint.config.js ├── index.html ├── package.json ├── package-lock.json ├── src │ ├── App.css │ ├── App.jsx │ ├── components │ │ └── <mark class="violet">DragDropList.jsx</mark> │ ├── index.css │ └── main.jsx └── vite.config.js ``` <details class="yellow"> <summary> **راه‌اندازی** </summary> فایل دانلود شده را از حالت فشرده خارج و دستور `npm install` را در `root` پروژه اجرا کنید. *همچنین برای هاست پروژه به صورت لوکال، می‌توانید از دستور* `npm run dev` *استفاده کنید.* </details> ظاهر کلی برنامه به شکل زیر است: ![خروجی](https://quera.org/qbox/view/KhHuEebaVu/view.png) یکی از پرتکرار ترین سوالات مصاحبه‌ای، اعمال یک لیست با قابلیت کشیدن و رهاکردن*(Drag&Drop)* است. این سوال در حال ساده بودن از نظر ظاهری، توانایی‌های یک توسعه‌دهنده را از جهات مختلف به چالش می‌کشد! صورت مسئله به شکل زیر است: ### آرایه `initialItems` این آرایه شامل پنج آیتم با اسم‌های `[Item1, Item2, Item3, Item4, Item5]` است که لیست ما باید این آیتم‌ها را به ترتیب نمایش دهد *(توجه داشته باشید که شما مجاز به ویرایش اسم این آیتم ها نیستید)*. ### لیست `ul` این لیست باید این قابلیت را داشته باشد که بعد از کشیدن و رها کردن هر آیتم، خودش را بروزرسانی کند و آرایه را با ترتیب جدید نمایش دهد. <details class="blue"> <summary> **مثال** </summary> بعد از کشیدن `Item5` و رها کردن آن در وسط لیست باید خروجی ما به شکل زیر باشد: ![خروجی مثال](https://uploadkon.ir/uploads/139f14_24Screenshot-2024-09-14-133219.png) </details> ## نکات + استایل‌های این کامپوننت نوشته شده و شما فقط باید لاجیک آن را اعمال کنید. + از حذف یا ویرایش `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 │ │ └── <mark class="violet">DragDropList.jsx</mark> │ ├── index.css │ └── main.jsx └── vite.config.js ```

کشیدن و رها کردن

پروژه اولیه🔗

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

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

راه‌اندازی

فایل دانلود شده را از حالت فشرده خارج و دستور npm install را در root پروژه اجرا کنید.

همچنین برای هاست پروژه به صورت لوکال، می‌توانید از دستور npm run dev استفاده کنید.

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

خروجی

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

آرایه `initialItems`🔗

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

لیست `ul`🔗

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

مثال

بعد از کشیدن Item5 و رها کردن آن در وسط لیست باید خروجی ما به شکل زیر باشد:

خروجی مثال

نکات🔗

استایل‌های این کامپوننت نوشته شده و شما فقط باید لاجیک آن را اعمال کنید.
از حذف یا ویرایش 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