یک لیست ساده از آیتمها بسازید که کاربر بتواند با استفاده از Drag & Drop ترتیب آیتمها را تغییر دهد و ترتیب جدید در یک آرایهٔ جاوااسکریپت ذخیره شود.
19.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:39 1.0
برای حل این مسئله از HTML5 Drag and Drop API و جاوااسکریپت استفاده کنید: برای هر آیتم ویژگی draggable="true" قرار دهید، رویدادهای dragstart، dragover و drop را مدیریت کنید، در dragstart اطلاعات آیتم (مثلاً اندیس یا id) را در dataTransfer قرار دهید و در drop با preventDefault() از رفتار پیشفرض جلوگیری کرده و محل جدید را در DOM جایگذاری کنید؛ سپس با خواندن ترتیب فعلی DOM آرایهٔ جاوااسکریپت را بهروزرسانی کنید. نکات: از کلاسهای CSS برای نمایش حالت کشیدن (مثلاً highlight) استفاده کنید، هنگام обработка drop ترتیب را بر اساس datasetها بهروز کنید و برای تجربهٔ بهتر روی موبایل یا دسترسیپذیری، در صورت نیاز جایگزینهای کیبورد یا کتابخانههای سبک مانند SortableJS را در نظر بگیرید.
توسط پژوهشگر در 201 روز قبل ساعت 03:39 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای تجربهٔ بهتر، به دسترسیپذیری فکر کنید و از ویژگیهای aria مانند aria-drag و aria-grabbed استفاده کنید تا کاربران با صفحهکلید هم بتوانند جابهجا کنند. در رویداد dragover مقدار preventDefault() را فراخوانی کنید تا امکان رهاسازی فراهم شود و در drop محل جدید را در DOM قرار داده و ترتیبِ آرایهٔ جاوااسکریپت را بهروز کنید. در برخی مرورگرها باید با استفاده از setData/getData در dataTransfer کار کنید و برای پشتیبانیِ کامل، داشتن جایگزین کیبورد یا کتابخانهٔ سبک مانند SortableJS مفید است. همچنین با افزودن کلاس CSS مثل highlight در هنگام کشیدن نمایشِ بصریِ محلِ رهاسازی را به کاربر نشان دهید.
گزارش