در این آموزش jQuery , قصد داریم به شما یک کد نمونه از کشیدن و رها کردن عناصر در jQuery را نشان بدیم .
در این مثال , برای استفاده از توابع مربوط به کشیدن و انداختن المنت ها نیاز به کتابخانه jQuery UI داریم.
ما از تابع draggable() برای حرکت دادن یک یک عنصر یا تگ قابل drag & drop استفاده می کنیم .
عنصر قابل کشیدن و رها کردن
ما از یک تصویر را به عنوان المنت قابل کشیدن (drag) با جی کوئری استفاده میکنیم. با استفاده از id که به این تصویر اشاره دارد , تابع draggable() در جی کوئری را فراخوانی میکنم.
|
1 |
<img src="smile.jpg" id="drag_smile"> |
تابع draggable() جی کوئری
با فراخوانی تابع draggable بر روی تصویر با id مشخص شده و همچنین یک خط کد jquery زیر می توانیم با استفاده از قابلیت Drag and Drop , عکس را به هر جایی از صفحه منتقل کنیم.
|
1 |
$( "#drag_smile" ).draggable(); |
همچنین اگر قصد داریم محدوده کشیدن و رها کردن عناصر در jQuery را مشخص کنیم , میتوانیم از کد زیر بهره ببریم .
|
1 2 3 4 5 |
$(function() { $( "#drag_smile" ).draggable({ containment: "parent" }); }); |
گزینه بالا اشاره دارد به اینکه محدوده انتقال المنت فقط به اندازه تگ مادر (parent) خود است.
خروجی کشیدن و رها کردن عناصر در jQuery
آپشن ها , متد و رویداد های مختلف دیگری برای کنترل کشیدن و راها کردن در جی کوئری وجود دارد . این آپشن ها می توانند به عنوان آرگومان های تابع draggable تعریف شوند .
برای مثال می توانیم مقدار cursor بر روی رویداد drag را تنظیم کنیم.
|
1 |
$( "#drag_smile" ).draggable({ cursor: "hand" }); |
این تنظیمات می تواند بعد یا قبل اجرای رویداد درگ ست شوند
|
1 2 |
$( "#drag_smile" ).draggable(); $( "#drag_smile" ).draggable("option", "cursor", "hand" ); |
گزینه های دیگر کشیدن و رها کردن عناصر در jQuery
Axis– مشخص کننده مسیر کشیدن المنت (vertical – horizontal – عمودی – افقی)Delay– مکث میلی ثانیه ای کشیدن تصویر از شروع نگه داشتن ماوسHelper– در صورت نیاز اجازه گرفتن کپی از المنت را می دهد.Revert– بازگرداندن تصویر درگ شده به موقعیت اولیه (مقادیر صحیح : true یا valid)revertDuration– زمان مکث برای بازگشت المنت به موقعیت اولیهscroll– کشیدن المنت در محیط قابل اسکرول- و بسیاری از گزینه های دیگر که قابلیت کشیدن و رها کردن عناصر در jQuery را جالب تر می کند.
توابع
Enable()– فعال کردن کشیدن (drag)disable()– غیرفعال کردن کشیدن (drag)Destroy()– پاک کردن تاریخچه لاگ هاOptions()– ست کردن خصوصیات (properties)
رویداد ها
- Create – در هنگام ساختن
- Start – در هنگام شروع کشیدن المنت با پایین نگه داشتن کلید ماوس
- Stop – در هنگام رها کردن کلید ماوس
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
چطور میشه این درگ دراپ مگنتی باشه یعنی مثلا اگه یه شیپ دیگه بود بردیم منارش بچسپه بهش و اگه درست چسپیده بود تشخیص بده
من میخوام یه مربع شکسته شده رو بهم بچسپونم و وقتی درست شد بتونم تشخیص بدم که درست چسپیده
از کتابخانه مگنت استفاده کنید
https://www.cssscript.com/drag-drop-snap-place-magnet-js
سلام
چه طوری میتونم یه دیو ک وسط صفحه اس یه ذره درگ کنم با انیمیشن خودش بره گوشه صفحه و نرسیده اونجا محو بشه
ممنون میشم سریع جواب بدین
سلام. کار با انمیشن ها در jquery در اینجا آموزش داده شده :
https://netparadis.com/jquery-tutorial-9-animation-effects/
https://netparadis.com/bouncing-ball-animation-jquery
مرسی
منظورم این انیمیشن نبود
میخوام وقتی چیزی درگ شد یه انمیشن بهش داده بشه
مثلا یک دیو رو به هر سمتی که درگ کردیم بره اون سمت وایسه با انیمیشن
باید با این ترکیب کنید :
https://netparadis.com/jquery-drag-and-drop