لوگوی وبسایت
تمام آموزش های وبسایت رایگان می باشد ، پس از صفحات مختلف سایت دیدن فرمایید .

آموزش درگ و دراپ در جی کوئری

سلام دوستان امیدوارم حالتون خوب باشد . در این مقاله قراره یک رابط کاربری را استفاده از Draggable و Droppable در JQueryUI بسازیم . با ما همراه باشید .

نتیجه کار:

دانلود “سورس آموزش مقدماتی درگ و دراپ” draganddrop.rar – Downloaded 95 times – 214 KB

اول از همه باید جی کوئری UI را از آدرس http://jqueryui.com/download/ دانلود نماییم . سپس یک پوشه به نام draganddrop میسازیم و در آن یک فایل به نام index.html میسازیم . سپس یک پوشه به نام css میسازیم و فایل های jquery-ui.structure.css و jquery-ui.theme.css را در آن قرار میدهیم . پوشه ی images را در draganddrop قرار میدهیم سپس یک پوشه به نام js میسازیم و فایل های jqeury.js و jquery-ui.js را در آن قرار میدهیم .

پیوست JQuery و JQuery UI به پرونده ی HTML

برای این کار ابتدا فایل jquery.js را پیوست میکنیم ( حتما باید اول پیوست شود زیرا jquery-ui.js به آن نیاز دارد ) ، سپس jquery-ui.js و فایل های استایل را پیوست میکنیم :

خوب حالا باید ساختار HTML امان را آماده کنیم . ما یک Div با کلاس file-list داریم که قرار است فایل های ما ( که قرار است درگ شوند ) در آن قرار بگیرند ، یک سری فایل داریم و div.drop-zone که قرار است فایل ها در آن دراپ شوند ( نقش سبد خرید ) .

خوب حالا وقت دادن استایل به آن ها هست . من یک استایل معمولی آماده کرده ام ولی یک سری نکات در استایل ها نهفته است !

اولین استایل برای file-list است که عرض آن را با توجه به این که قرار است سبد خرید سمت راست قرار بگیرد ( و عرض آن ۳۰۰px هست ) تنظیم میکنیم .

دومین استایل برای file هاست که باید یک استایل تمیز داشته باشند . من z-index رو برابر ۹۹ کردم زیرا z-index سبد خرید هم چون position:absolute هست با فایل ها برابر میشود و جون پایین تر از آن ها قرار دارد ( در HTML ) روی آنها قرار میگیرد برای همین z-index:99 قرار دادم .

drop-zone که نکته ی خاصی ندارد ولی باید به hovering-zone توجه داشت ، زمانی که فایل ها درگ میشوند و روی ، توجه کنید روی ، سبد خرید قرار میگریند ، این استایل رو به سبد خرید میدهیم . میتوانید برای سبد خرید استایلی برای زمان رها شدن فایل هم  بسازید ( این به عهده خودتان )

استایل delte هم برای یک لینک است که قرار است با کلیک بر اون فایل درون سبد خرید حذف شود ( بزودی با آن دیدار خواهید کرد !!)

خوب حالا وقت شروع کار کد نویسی js هست .

شروع کار draggable در JQuery

draggable کار راحتی است ! فقط .draggable(); را بعد از سلکت المنت قرار میدهیم

خوب ، میبینید که فایل قابل درگ شدن هست ولی یک سری نکات ، ما میخواهیم اگر فایل در سبد خرید قرار گرفت به صورت نمادین به جای قبلش بر گردد و حذف نشود ! و اینکه اگر شما فایل را به نزدیگی اسکرول بار ببرید میبینید که فایل اسکرول بار را تکان خواهد داد زیرا محدود نیست ، برای این کار باید برای آن container تعریف کنیم :

containment تعریف میکند که فایل کجا ها قرار بگیرد ، ورودی یک Query میباشد که میتوانید از کوئری سلکت استفاده کنید ( برای مثال :  “.container” , “#container” , “container” );

ما با helper:clone تعریف میکنیم که درگ ما Clone باشد یعنی  یک المنت کپی المنت Draggable جا به جا شود  ، نه خود draggable !

revert هم تعریف میکند که آیا فایل پس از Drop به جای خودش برگردد یا نه که ما true تعریف میکنیم .

حالا نوبت drop کردن است

شروع کار با droppable در JQuery

خوب مانند draggable ، در droppable هم کار ساده ایی داریم .

حالا میتوانید تعیین  کنیم که اگر فایل هنگام درگ روی droppable آمد چه استایلی داشته باشد – hoverClass ، و زمانی که فایل رها شد چه استایلی داشته باشد – activeClass .

تست کنید میبینید که drop-zone پاسخ میدهد ولی حالا نوبت آن است کد مان را برای زمانی که فایل رها میشود تعیین کنیم ، برای این کار باید به drop یک تابع بدهیم که ورودی اول آن window.event و ورودی دوم آن draggable است .

draggable در اصل مشخصات المنت draggable ما میباشد که با console.log کردن آن اطلاعات خوبی بدست میآورید .

خروجی :

draggable المنت اصلی ما میباشد و offset مکان رها کردن فایل در صفحه و position در کل داکیونت میباشد .

خوب ما میخواهیم یک المنت جدید بسازیم و در drop-zone قرار دهیم .

من از time برای ایجاد تفاوت بین ای دی المنت ها استفاده کردم . راستی این شما  و این delte ! یک تابع هم به نام deleteFile هم ساختم که قراره ورودی شناسه المنت رو بگیره و حذفش کنه :

دانلود “سورس آموزش مقدماتی درگ و دراپ” draganddrop.rar – Downloaded 95 times – 214 KB

امیدوارم این آموزش بدردتون خرده باشد . اگر سوالی داشتید میتوانید در نظرات اعلام کنید .

کانال تلگرام ما : telegram.me/mhrdev

بر چسب های پست : , , , , , , , ,
مطالب مرتبط
سلام دوستان امید وارم حالتون خوب باشد . در این آموزش قراره که با هم یک صفحه ی آپ ...
۱۷ شهریور ۹۴
0 دیدگاه

پاسخ دهید

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

ورود به حساب کاربری
بستن این پنجره