با استفاده از HTML/CSS و JavaScript یک رابط کشیدن و رها کردن بسازید که کاربر بتواند آیتمها را بین دو لیست جابهجا کند و ترتیب جدید آیتمها پس از رها کردن ذخیره شود.
1.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 02:03 0.0
برای حل این مسئله از API بومی Drag and Drop مرورگر استفاده کنید: به آیتمها attribute="draggable=true" بدهید و در رویدادهای dragstart، dragover و drop از event.dataTransfer برای انتقال شناسه آیتم استفاده کنید؛ در dragover از event.preventDefault() برای فعالسازی رها کردن استفاده کنید و در drop آیتم را به لیست مقصد منتقل و آرایهی دادهها را بروزرسانی نمایید. برای تجربه کاربری بهتر است هنگام drag از کلاسهای CSS برای نشان دادن محل رها شدن استفاده کنید و ترتیب جدید را در localStorage ذخیره کنید تا پس از بارگذاری مجدد صفحه حفظ شود.
توسط پژوهشگر در 220 روز قبل ساعت 02:03 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
بهجا از دوباره محاسبه موقعیت با CSS-only استفاده کنید: فقط در هنگام dragover و drop کلاسهای نشانهگذاری را اضافه/حذف کنید تا بازخورد بصری کاربر سریع باشد. در dragover فراموش نکنید event.preventDefault() را فراخوانی کنید و از dropEffect مناسبی استفاده کنید تا رهاسازی قابل پیشبینی باشد. هنگام drop، آیتم را به لیست مقصد منتقل کنید و آرایههای مربوطه را بهروزرسانی کرده و نتیجه را در localStorage ذخیره کنید تا با بارگذاریهای بعدی حفظ شود. برای دسترسی بهتر، از ویژگیهای ARIA مثل aria-grabbed و aria-dropeffect استفاده کنید و کلیدهای کیبورد را پاسخگو کنید.
گزارش