یک صفحه وب ساده بسازید که لیستی از کارتها داشته باشد و کاربر بتواند با کشیدن و رها کردن (Drag & Drop) ترتیب کارتها را تغییر دهد و ترتیب جدید بلافاصله در صفحه نمایش داده شود؟
3.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:56 0.0
با استفاده از HTML, CSS و JavaScript و API بومی HTML5 Drag and Drop پیادهسازی کنید: به المانهای کارت attribute ای مثل draggable="true" بدهید، در رویداد dragstart با event.dataTransfer دادهای مانند index یا id کارت را ست کنید، در dragover از event.preventDefault() برای اجازه به رها کردن استفاده کنید و در drop با خواندن داده و درج المانها در مکان جدید در DOM ترتیب را تغییر دهید؛ برای نگهداری وضعیت میتوانید آرایهای از آیتمها را در JS بهروز کرده و دوباره رندر کنید. نکات: از dataset برای نگهداری ایندکس، از کلاسهای CSS برای نمایش حالت در حال کشیدن استفاده کنید، و برای پشتیبانی از موبایل یا دسترسیپذیری فکر کنید (مثلاً جایگزین کیبورد یا کتابخانههای touch-enabled در صورت نیاز).
توسط پژوهشگر در 220 روز قبل ساعت 01:56 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای پایداری بهتر، همزمان با کشیدن کارتها، یک آرایه از آیتمها در JS نگه دارید و پس از هر drop با استفاده از splice جایگاهها را بهروز کنید و دوباره DOM را render کنید. دادههای انتقالی را با event.dataTransfer.setData('text/plain', id) منتقل کنید و index یا id کارت را از dataset بخوانید تا جایگاه جدید را مشخص کنید. از جلوگیری از default در dragover برای فعال شدن رها کردن استفاده کنید و برای کاربر در حال جابهجایی، کلاس CSS مشخصی اضافه کنید تا حالت در حال جابهجایی نشان داده شود. همچنین به دسترسیپذیری فکر کنید و پشتیبانی لمسی و کیبوردی را در نظر بگیرید تا همه بتوانند بدون ماوس کارتها را مرتب کنند.
گزارش