یک رابط کشیدن و رها کردن ساده با HTML/CSS/JavaScript بسازید که کاربران بتوانند آیتمها را از یک لیست به ناحیه مقصد بکشند و پس از رها کردن ترتیب آیتمها در ناحیه مقصد بهروزرسانی شود.
2.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:56برای حل این مسئله از API کشیدن و رها کردن مرورگر استفاده کنید: در HTML آیتمها را با attributeِ draggable="true" مشخص کنید، در جاوااسکریپت رویدادهای dragstart برای تنظیم داده (dataTransfer.setData)، dragover برای جلوگیری از رفتار پیشفرض (preventDefault) تا ناحیه مقصد قابل رها کردن شود، و drop برای دریافت داده (dataTransfer.getData) و افزودن یا جابهجایی عنصر در مقصد را هندل کنید. از CSS برای نمایش حالتهای هنگام کشیدن (مثلاً هایلایت کردن ناحیه مقصد) استفاده کنید و برای بهروزرسانی ترتیب، عناصر را با appendChild یا insertBefore منتقل کنید؛ نکتهها: از شناسه یا index اختصاصی برای هر آیتم استفاده کنید تا هنگام دریافت داده بتوانید عنصر درست را پیدا کنید و برای پشتیبانی موبایل اگر لازم است از کتابخانههای کمکی یا پیادهسازی مبتنی بر رویدادهای لمسی استفاده کنید.
توسط پژوهشگر در 202 روز قبل ساعت 02:56
یک نکته مهم اینه که برای پشتیبانی بهتر موبایل، رویدادهای لمسی یا کتابخانهای مثل Pointer Events یا Touch Events رو بهعنوان جایگزین drag-and-drop اضافه کنید، چون برخی مرورگرها روی موبایل کامل پشتیبانی نمیکنند. همچنین برای پیدا کردن آیتم درست در مقصد، بهتر است هر آیتم یک شناسه منحصر بهفرد داشته باشد و در زمان درگ، شناسه را با dataTransfer.setData منتقل کنید تا در drop بتوانید عنصر را با مدل خود همگام کنید. استفاده از dragover با preventDefault برای فعال شدن نقطه رهاسازی ضروری است و اضافه کردن کلاس های هایلایت به ناحیه مقصد در رویدادهای dragenter/dragleave تجربه کاربری را بهبود میدهد. در نهایت برای بهروزرسانی ترتیب، میتوانید با appendChild یا insertBefore به ترتیب جدید عنصرها را در DOM منتقل کنید و اگر امکان دارد وضعیت ترتیب را در یک آرایه مدل هم نگه دارید.
گزارش