illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آموزش Drag کردن عناصر با ماوس و کیبرد با جی کوئری

10867 ۲۸ بهمن ۹۲

سلام خدمت همه ی سون لرنی های عزیز...امیدوارم حال همتون خوب باشه

در این جلسه با نحوه Drag کردن عناصر با ماوس و کیبرد با جی کوئری آشنا میشید...

همونطور که میدونید توی html5 که drag خیلی ظاهر زیبایی نداره.چون توی drag کردن باید خود المنت هم جابه جا بشه که این اتفاق نمی افته... اگر هم بخواهید JQUERY UI  یا سایر پلاگین ها رو استفاده کنید، هیچ شناختی رو المنتی که drag میشه یا نحوه ی drag کردن ندارید...این طور شد که جرقه ساخت این آموزش در ذهنم ایجاد شد. همچنین این کد رو طوری طراحی کردم که با دکمه های بالا و پایین و چپ و راست کیبرد هم میتونید المنت مورد نظرتون رو جابه جا کنید، که این کار فقط برای یک المنت انجام میشه.

این هم پیش نمایش:

یادآوری : وردپرس برای Drag و Drop در قسمت ابزارک ها از jQuery UI استفاده می کنه.

این آموزش ساده است در صورتی که شما با مفاهیم اولیه جی کوئری آشنایی داشته باشید.

این کد از بخشهای زیر تشکیل شده:

کدهای HTML:

که یک کتابخانه جی کوئری ویک سند حاوی کدهای CSS و جی کوئری به اون متصل شده.

برای فعال کردن drag باید به المنت مورد نظر کلاس draggable رو بدید..

کدهای CSS:

برای المنتی که drag میشه باید یه استایلی رو در نظر بگیرید تا اون المنت به طور واضح نمایان بشه و معلوم بشه که اون المنت داره drag میشه.

درخط 4 تا 6 مشخص می کنیم که وقتی المنتیی که drag میشه hover شد،ماوس به شکلی دربیاد که کاربر بفهمه این المنت drag میشه...

و در خط 7 تا 9 تعیین می کنیم که وقتی که المنت drag میشه،اگر المنت دیگری رو انتخاب کرد یا یکی از اعضای داخلی خودش انتخاب شد،به هیچ رنگی در نیاد..

برای این که منظورم رو متوجه بشید به این تصویر توجه کنید

اشکال بوجود آمده در صورت استفاده نکردن  از این قطعه کدوقتی که این کد نوشته نشه، در هنگام drag کردن ماوس به طور خودکار بخشی از متن رو انتخاب می کنه و رنگ پس زمینه اون رو آبی انتخاب می کنه، خب حالا ما توی این کد گفتیم اگه بخشی از متن هم انتخاب شد، رنگ پس زمینه برای اون المنت انتخاب نکن..

کدهای jQuery:

نکته : اگر دقت کنید متوجه میشید که این کد فقط برای عناصری طراحی شده که با position موقعیت دهی شده باشند و دلیل این امر واضحه، اگر بخواهیم drag کردن رو روی المنتی پیاده سازی کنیم که margin داشته باشه، صفحه به طور کلی به هم میریزه.
اول کد نویسی همیشه از رویداد ready برای document استفاده می کنیم تا مشکلی در اجرای کدهای جی کوئری پیش نیاد. در خط دوم کد، می خواهیم کد جا به جایی المنت با کلید های کیبرد رو بنویسیم.
نکته :

رویداد keydown هنگامی اجرا میشه که یکی از دکمه های کیبرد فشار داده بشه و به صورت زیر استفاده میشه:

که handler تابعی هست که وقتی اون رویداد انجام بشه، اتفاق میفته.

اول از رویداد keydown استفاده شده، یعنی هر وقت که یک از دکمه های کیبرد به پایین رفت باید تابعی اجرا بشه..

بعد با شرط ها چک میشه که دکمه ای که فشار داده شده شناسایی بشه...

نکته : e.keyCode یعنی کاربر چه دکمه ای رو فشار داده. و این e هنگامی که رویدادی اجرا میشه، یه سری از اطلاعات مربوط به اون رویداد رو توی خودش ذخیره میکنه.

این کد همیشه یه عدد رو برمیگردونه و شما باید با شرط ها اون رو شناسایی کنید.

اگه دکمه چپ فشار داده شده باشه، مقدار 37 برگردونده میشه و توی بلاک مربوط به این شرط دستور داده میشه که با تابع animate مقدار چپ اون المنت رو در عرض سه میلی ثانیه پنج واحد کم کنه...

یادآوری : وقتی کد به این شکل نوشته شده باشه...

یعنی مقدار top اون المنت هر چقدر که بود 5 واحد از اون کم کن، و توجه داشته باشید به این دلیل مقدار اجرای animation رو کم نوشتم چون ممکنه پس از برداشتن دستتون از روی دکمه های بالا و پائین و چپ و راست باز هم همچنان انیمیشن اجرا بشه...

نکته : شاید بپرسید چرا برای بردن المنت به سمت چپ مقدار right اون المنت رو زیاد نکردم؟؟

چون توی کد نویسی ها معمولاً مقادیری که به برای موقعیت دهی استفاده میشه top و left هست و اگه شما توی کدنویسی خودتون از مقادیری غیر از این دو استفاده کردید، باید این کد رو متناسب با نیازتون تغییر بدید.

اگر دکمه بالا رو فشار بدید، مقدار 38 و اگر دکمه راست رو فشار بدید مقدار 39  و اگر دکمه پایین رو فشار بدید مقدار 40 برگردونده میشه که به همون شیوه ای که در بالا توضیح دادم المنت موردنظر به بالا و پائین یا چپ و راست حرکت می کنه.

سعی کنید به جای استفاده از کلاس draggable از کلاس های دیگه ای استفاده کنید چون اگه چند تا المنت با همین کلاس داشته باشید، یکدفعه همشون با هم حرکت می کنند.

و در اینجا رویداد keydown  تموم میشه و متحرک سازی المنت با کیبرد به پایان میرسه...

در اینجا می خواهیم Drag کردن با ماوس رو پیاده سازی کنیم... امیدوارم که خسته نشده باشید 😀

اول از رویداد mousedown استفاده شده، یعنی وقتی کلیک شد(حالا فرقی نمی کنه چه راست کلیک چه کلیک کردن با دکمه چپ) و استفاده از این رویداد سلیقه ای هست و میتونید به جای این رویداد از click هم استفاده کنید.

بعد مقدار اون شیئی رو که روی اون کلیک شده رو توی یک متغیر به نام thisElement ریختم.در برنامه نویسی سعی کنید این کار رو انجام بدید، در صورتی که به جای this از همون گزینشگر بالایی استفاده کنید مشکلاتی در اجرا پیش میاد..مثلاً ممکنه شما هشت تا المنت رو کلاس draggable دادید و وقتی شما یک رو drag می کنید، اون هفت تا المنت هم راه میفتند و یه وضع ناجوری توی صفحه تون پیش میاد.حالا جالبه بدونید که این this که توی متغیر ذخیره شده  با سایر this هایی که توی کد هست فرق میکنه.حالا جلوتر که بریم متوجه میشید...

در خط بعدی دستور داده میشه که وقتی ماوس روی سند حرکت کرد تابعی رو به اجرا دربیاره

نکته : رویداد mousemove  یعنی وقتی ماوس حرکت کنه و به شکل زیر استفاده میشه.
نکته : حتماً دقت کردید که دو تا رویداد توی هم نوشتم؟

دلیلش اینه در جی کوئری رویدادی وجود نداره که هر دو کار رو با هم انجام بده، یعنی رویدادی که وقتی روی المنت کلیک شد و ماوس حرکت کرد، اجرا بشه. در ضمن اجرای رویداد دوم وابسته به رویداد اول هست یعنی تا وقتی اولی اجرا نشه دومی هم اجرا نمیشه.

به این نکته هم توجه داشته باشید، به این دلیل از document استفاده کردم که حالت کلی تری داره و اگر بخواهید از draggable. استفاده کنید، باید بعضی از جاهای کد رو تغییر بدید.

و نکته دیگر اینکه وقتی شما در رویداد دوم  از this استفاده کنید، جی کوئری document رو برای شما بر می گردونه به همین خاطر از متغیر thisElement که اون رو ایجاد کرده بودیم، استفاده می کنیم.

در اینجا متغیر هایی تحت عنوان a و b تعریف شده و سپس متغیرهای x و y که برای موقعیت دهی ماوس و المنت در طول درگ کردن استفاده میشه.

هر المنتی که Drag شد از وسط همون المنت کشیده میشه...

پس، اندازه طول و عرض رو با توابع width و height می گیریم و چون می خواهیم از وسط drag بشه نصفشون می کنیم یا تقسیم بر 2 می کنیم. ممکنه المنت margin داشته باشه و اگه margin داشته باشه، ماوس هم به همون اندازه ازش فاصله می گیره و هنگام Drag کردن المنت، یه کمی زشت به نظر میاد، برای همین ما مقادیر margin-top و margin-left رو می گیریم و به موقعیت ماوس اضافه می کنیم تا دقیقاً در وسط المنت قرار بگیره(البته گفته بودم که نباید margin به المنت داده بشه، ولی می تونید هنگام درگ کردن margin ها رو بگیرید و اون مقادیر رو به position بدید.)

اگر هم margin اون المنت 0 باشه که هیچ اتفاقی نمیفته...

نکته : تابع parseFloat در جاوا اسکریپت یک رشته رو که حاوی عدد هست رو می گیره و عدد اون رو با رقمهای اعشارش بر می گردونه.

در ضمن jQuery مقادیر margin و padding رو با px بر می گردونه که با استفاده از تابع parseFloat این رشته ی عددی رو به عدد تبدیل می کنه و px رو از آخر اون حذف میکنه.

اگر می خواهید اعداد بدون قسمت اعشاری برگردانده شوند از تابع parseInt استفاده کنید.

سپس با استفاده از e.pageX و e.pageY موقعیت ماوس در هر لحظه برگردونده میشه، و با استفاده از متغیر های a و b و یک منهای ساده ماوس المنت موقعیت دهی میشه.

سپس با تابع CSS موقعیت این المنت رو در صفحه مشخص می کنیم. مقدار top رو برابر با y و مقدار left رو برابر با x،در ضمن opacity اون المت رو هم کم کردم چون به نظر من جلوه ی بهتری داره.

یادآوری : رویداد mousemove پشت سرهم و مکرر اجرا میشه و مقدار های جدیدی در متغیرهای x و y قرار می گیره.

خب در اینجا drag کردن تموم شد، ولی اگه دقت کنید این المنت حتی بعد از برداشتن دستتون از روی دکمه ماوس هم Drag میشه...اشکال کجاست؟؟

باید رویداد mousemove رو لغو کنید. که در خط بعدی همین کار انجام شده...

نکته : تابع mouseup هنگامی اجرا میشه که دکمه ی ماوس که فشار داده شده، رها بشه.

تابع unbind کنترلگر رویدادهایی(event handler) رو که قبلاً اجرا شده حذف میکنه و یک پارامتر میگیره و اون پارامتر هم همان کنترلگر رویدادی است که حذف میشه.

حالا موقعی که دکمه ماوس رها میشه،با تابع unbind دستور دادیم که کنترلگر رویداد mousemove رو برای document لغو کن و opacity اون المنت رو به حالت اولیه که 1 هست برگردون.

اینجا دیگه از می تونید از this استفاده کنید چون مستقیماً برمیگرده به همون draggable .

می تونید همه ی فایل های لازم رو یکجا از زیر دانلود کنید :

.: فقط کاربران VIP سايت مجاز به ديدن اين قسمت هستند :.
در صورتي که عضو سايت هستيد می توانید لاگین شويد و عضو VIP شوید .
در غير اين صورت در کمتر از 1 دقيقه مي توانيد در سايت عضو شويد.

هر مشکل و سوالی که داشتید در قسمت نظرات مطرح کنید...

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    وحید صالحی(۲۹ بهمن ۱۳۹۲)

    حسین جان ممنون از مطلب مفیدت فقط برای کامل تر شدنش پیشنهاد میکنم ترتیبی بدی که بعد از درگ عنصر از موقعیت x به y بعد از refresh صفحه در همون آخرین موقعیتش باقی بمونه یعنی در موقعیت y و به عبارتی stable بشه اینطوری کاربردی تر هم میشه مثل قسمت ابزارک های وردپرس که در بالا اشاره کردی اگر هم توابعش رو لازم داشتی بگو تا سورس و منبع رو در اختیارت بزارم… ❓

    • ‏‏
      حسین محمدی(۲۹ بهمن ۱۳۹۲)

      ممنون بابت پیشنهاد خوبتون…
      این کار هم خیلی جالبه…
      فقط ممکنه آدرس ایمیل کاری تون رو برای بحث و تبادل رو داشته باشم؟

  • ‏‏
    hossein maktoobian(۳۰ بهمن ۱۳۹۲)

    میشه لطفا در مورد آپلود و راه اندازی سایت مطالبی بذارین؟

    • ‏‏
      کیوان علی محمدی(۳۰ بهمن ۱۳۹۲)

      سلام واضح تر توضیح بدین برای چه سیستمی؟

  • ‏‏

    از کجا فایل زیر را دانلود کنم؟؟؟؟
    jquery-1.10.2.min.js

    • ‏‏
      وحید صالحی(۴ اسفند ۱۳۹۲)

      از این صفحه از قسمت jquery1.x روی اولین لینک کلیک کنید و محتویاتی که در صفحه جدید نمایش داده میشه رو کپی و در فایلی با پسوند js و نام دلخواه ذخیره کنیدالبته این ورژن 11 هست و جدیدتره…

  • ‏‏

    برای دانلود کردن script.js
    از کجا دانلود کنم؟؟؟؟؟؟؟؟؟
    ایا باید style.css را هم دانلود کنیم؟؟؟؟؟؟؟؟؟؟؟؟؟
    سپاس…

    • ‏‏
      حسین محمدی(۷ اسفند ۱۳۹۲)

      همه ی این فایل ها در قسمت دانلود کدهای نهایی وجود داره

  • ‏‏
    مجید(۱۰ دی ۱۳۹۳)

    سلام.
    سوالی داشتم .
    اگه بخوایم کاری بکنیم که یک محدوده ای داشته باشه مثلا 20px از سمت راست بیش تر جدا نشه باید چی کار کنیم؟
    لطفا با ایمیل من تماس بگیرید:
    majidmajid809@yahoo.com
    با تشکر

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram