یک صفحه وب ساده ایجاد کنید که شامل یک مربع قابل مشاهده باشد که با کلیک و کشیدن ماوس جابجا شود و همچنین با فشردن کلیدهای جهتی (Arrow keys) توسط صفحهکلید نیز حرکت کند.
13.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:57 0.0
برای حل، یک عنصر div برای مربع در HTML و استایل پایه با CSS بسازید و در JavaScript با addEventListener رویدادهای mousedown، mousemove و mouseup را پیادهسازی کنید تا هنگام کشیدن موس موقعیت مربع را بروزرسانی کنید (با ثبت آفست کلیک برای جلوگیری از پرش). همچنین رویداد keydown را (روی window یا یک کانتینر با tabindex) گوش دهید تا با فشردن کلیدهای جهتی مقدار x/y را تغییر داده و استایل left/top یا transform را بهروزرسانی کنید. از event.clientX/clientY برای مختصات موس، event.preventDefault() برای جلوگیری از اسکرول پیشفرض با کلیدهای جهتی و محدود کردن حرکت داخل کانتینر استفاده کنید؛ برای عملکرد روانتر میتوانید از requestAnimationFrame و transform: translate(...) بهره ببرید و برای پشتیبانی لمسی رویدادهای touch را نیز اضافه کنید.
توسط پژوهشگر در 201 روز قبل ساعت 03:57 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای عملکرد بهتر و پشتیبانی از لمس، از pointerdown/pointermove/pointerup بهجای mousedown/mousemove/mouseup استفاده کنید تا هم موس و هم تاچ کار کنند. هنگام کنترل با کیبورد، از preventDefault در keydown برای جلوگیری از اسکرول استفاده کنید و بهروزرسانی موقعیت را محدود به کانتینر نمایید. بهجای تغییر مستقیم left/top، از transform: translate(...) و درخواستAnimationFrame بهره ببرید تا حرکت روان باشد. همچنین حداقل یک کانتینر با tabindex را برای تمرکز و کلیدهای جهت اضافه کنید تا کاربر بتواند با صفحهکلید نیز مربع را جابهجا کند.
گزارش