کشیدن و رها کردن عناصر در jQuery

  • آپدیت شده در تاریخ

کشیدن و رها کردن عناصر در jQuery

در این آموزش jQuery , قصد داریم به شما یک کد نمونه از کشیدن و رها کردن عناصر در jQuery را نشان بدیم .

در این مثال , برای استفاده از توابع مربوط به کشیدن و انداختن المنت ها نیاز به کتابخانه jQuery UI داریم.

ما از تابع draggable() برای حرکت دادن یک یک عنصر یا تگ قابل drag & drop استفاده می کنیم .

کشیدن و رها کردن عناصر در jQuery

عنصر قابل کشیدن و رها کردن

ما از یک تصویر را به عنوان المنت قابل کشیدن (drag) با جی کوئری استفاده میکنیم. با استفاده از id که به این تصویر اشاره دارد , تابع draggable() در جی کوئری را فراخوانی میکنم.

تابع draggable() جی کوئری

با فراخوانی تابع draggable بر روی تصویر با id مشخص شده و همچنین یک خط کد jquery زیر می توانیم با استفاده از قابلیت Drag and Drop , عکس را به هر جایی از صفحه منتقل کنیم.

همچنین اگر قصد داریم محدوده کشیدن و رها کردن عناصر در jQuery را مشخص کنیم , میتوانیم از کد زیر بهره ببریم .

گزینه بالا اشاره دارد به اینکه محدوده انتقال المنت فقط به اندازه تگ مادر (parent) خود است.

خروجی کشیدن و رها کردن عناصر در jQuery

کشیدن و رها کردن عناصر در jQuery

آپشن ها , متد و رویداد های مختلف دیگری برای کنترل کشیدن و راها کردن در جی کوئری وجود دارد . این آپشن ها می توانند به عنوان آرگومان های تابع draggable تعریف شوند .

برای مثال می توانیم مقدار cursor بر روی رویداد drag را تنظیم کنیم.

این تنظیمات می تواند بعد یا قبل اجرای رویداد درگ ست شوند

گزینه های دیگر کشیدن و رها کردن عناصر در jQuery

  • Axis – مشخص کننده مسیر کشیدن المنت (vertical horizontal – عمودی – افقی)
  • Delay – مکث میلی ثانیه ای کشیدن تصویر از شروع نگه داشتن ماوس
  • Helper – در صورت نیاز اجازه گرفتن کپی از المنت را می دهد.
  • Revert – بازگرداندن تصویر درگ شده به موقعیت اولیه (مقادیر صحیح : true یا valid)
  • revertDuration – زمان مکث برای بازگشت المنت به موقعیت اولیه
  • scroll – کشیدن المنت در محیط قابل اسکرول
  • و بسیاری از گزینه های دیگر که قابلیت کشیدن و رها کردن عناصر در jQuery را جالب تر می کند.

توابع

  • Enable() – فعال کردن کشیدن (drag)
  • disable() – غیرفعال کردن کشیدن (drag)
  • Destroy() – پاک کردن تاریخچه لاگ ها
  • Options() – ست کردن خصوصیات (properties)

رویداد ها

  1. Create – در هنگام ساختن
  2. Start – در هنگام شروع کشیدن المنت با پایین نگه داشتن کلید ماوس
  3. Stop – در هنگام رها کردن کلید ماوس

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۶)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. علی ۱۵ تیر ۱۴۰۱

    چطور میشه این درگ دراپ مگنتی باشه یعنی مثلا اگه یه شیپ دیگه بود بردیم منارش بچسپه بهش و اگه درست چسپیده بود تشخیص بده

    من میخوام یه مربع شکسته شده رو بهم بچسپونم و وقتی درست شد بتونم تشخیص بدم که درست چسپیده

    پاسخ
    1. حسن شفیعی ۱۶ تیر ۱۴۰۱

      از کتابخانه مگنت استفاده کنید
      https://www.cssscript.com/drag-drop-snap-place-magnet-js

      پاسخ
  2. مهرداد ۲۱ اسفند ۱۳۹۹

    سلام
    چه طوری میتونم یه دیو ک وسط صفحه اس یه ذره درگ کنم با انیمیشن خودش بره گوشه صفحه و نرسیده اونجا محو بشه
    ممنون میشم سریع جواب بدین

    پاسخ
    1. حسن شفیعی ۲۱ اسفند ۱۳۹۹

      سلام. کار با انمیشن ها در jquery در اینجا آموزش داده شده :
      https://netparadis.com/jquery-tutorial-9-animation-effects/
      https://netparadis.com/bouncing-ball-animation-jquery

      پاسخ
      1. مهرداد ۲۱ اسفند ۱۳۹۹

        مرسی
        منظورم این انیمیشن نبود
        میخوام وقتی چیزی درگ شد یه انمیشن بهش داده بشه
        مثلا یک دیو رو به هر سمتی که درگ کردیم بره اون سمت وایسه با انیمیشن

        پاسخ
      2. حسن شفیعی ۲۱ اسفند ۱۳۹۹

        باید با این ترکیب کنید :
        https://netparadis.com/jquery-drag-and-drop

        پاسخ
دوره های آموزشی