یک لیست کارهای ساده بسازید که کاربر بتواند آیتم‌ها را با کشیدن و رها کردن (drag & drop) جابه‌جا و مرتب کند با استفاده از HTML5 و JavaScript.

برای حل این مسئله از ویژگی draggable در عناصر لیست و رویدادهای HTML5 Drag & Drop (dragstart, dragover, drop, dragend) در جاوااسکریپت استفاده کنید: در dragstart اطلاعات یا مرجع عنصر مبدا را ذخیره کنید، در dragover با event.preventDefault() اجازه رها کردن را بدهید، و در drop محل جدید را با درج عنصر مبدا در DOM تنظیم کنید. برای ذخیره‌ی مرتب‌سازی می‌توانید ترتیب جدید را در localStorage ذخیره کنید تا پس از بارگذاری صفحه باقی بماند. نکات و ترفندها: از کلاس‌های CSS برای نشان دادن حالت در حال کشیدن استفاده کنید، از event delegation برای ساده‌تر کردن مدیریت رویدادها بهره ببرید، و برای دسترسی‌پذیری aria-grabbed یا نقش‌های مناسب را اضافه کنید؛ در صورت نیاز به پشتیبانی موبایل، راه‌حل لمسی جایگزین یا کتابخانه‌های سبک برای drag & drop را در نظر بگیرید.