آموزش Drag کردن عناصر با ماوس و کیبرد با جی کوئری
سلام خدمت همه ی سون لرنی‌های عزیز…امیدوارم حال همتون خوب باشه
در این جلسه با نحوه Drag کردن عناصر با ماوس و کیبرد با جی کوئری آشنا میشید…
همونطور که میدونید توی html5 که drag خیلی ظاهر زیبایی نداره.چون توی drag کردن باید خود المنت هم جابه جا بشه که این اتفاق نمی‌افته… اگر هم بخواهید JQUERY UI یا سایر پلاگین‌ها رو استفاده کنید، هیچ شناختی رو المنتی که drag میشه یا نحوه ی drag کردن ندارید…این طور شد که جرقه ساخت این آموزش در ذهنم ایجاد شد. همچنین این کد رو طوری طراحی کردم که با دکمه‌های بالا و پایین و چپ و راست کیبرد هم میتونید المنت مورد نظرتون رو جابه جا کنید، که این کار فقط برای یک المنت انجام میشه.
این هم پیش نمایش:
[remind]وردپرس برای Drag و Drop در قسمت ابزارک‌ها از jQuery UI استفاده میکنه.[/remind]
این آموزش ساده است در صورتی که شما با مفاهیم اولیه جی کوئری آشنایی داشته باشید.
این کد از بخشهای زیر تشکیل شده:
کدهای HTML:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="style.css" /> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script.js"></script> <title>آموزش درگ کردن عناصر با جی کوئری</title> </head> <body> <div> </div> </body> </html>
که یک کتابخانه جی کوئری ویک سند حاوی کدهای CSS و جی کوئری به اون متصل شده.
برای فعال کردن drag باید به المنت مورد نظر کلاس draggable رو بدید..
کدهای CSS:
.draggable{
/* CSS codes */
}
.draggable:hover,.draggable:active{
cursor:move;
}
.draggable::selection,.draggable *::selection{
background-color:transparent;
}
برای المنتی که drag میشه باید یه استایلی رو در نظر بگیرید تا اون المنت به طور واضح نمایان بشه و معلوم بشه که اون المنت داره drag میشه.
درخط 4 تا 6 مشخص می‌کنیم که وقتی المنتیی که drag میشه hover شد،ماوس به شکلی دربیاد که کاربر بفهمه این المنت drag میشه…
و در خط 7 تا 9 تعیین می‌کنیم که وقتی که المنت drag میشه،اگر المنت دیگری رو انتخاب کرد یا یکی از اعضای داخلی خودش انتخاب شد،به هیچ رنگی در نیاد..
وقتی که این کد نوشته نشه، در هنگام drag کردن ماوس به طور خودکار بخشی از متن رو انتخاب میکنه و رنگ پس زمینه اون رو آبی انتخاب میکنه، خب حالا ما توی این کد گفتیم اگه بخشی از متن هم انتخاب شد، رنگ پس زمینه برای اون المنت انتخاب نکن..
کدهای jQuery:
$(document).ready(function(e){
$(document).keydown(function(e){
if(e.keyCode==37){$('.draggable').animate({'left':'-=5'},3);}
if(e.keyCode==39){$('.draggable').animate({'left':'+=5'},3);}
if(e.keyCode==38){$('.draggable').animate({'top':'-=5'},3);}
if(e.keyCode==40){$('.draggable').animate({'top':'+=5'},3);}
})
$('.draggable').mousedown(function(e){
var thisElement = this;
$(document).mousemove(function(e){
a=$(thisElement).width()/2 + parseInt($(thisElement).css('margin-left'));
b=$(thisElement).height()/2 + parseInt($(thisElement).css('margin-top'));
var x = e.pageX-(a);
var y = e.pageY-(b);
$(thisElement).css({'position':'absolute','top': y +'px', 'left': x +'px','opacity':'.45'});
});
}).mouseup(function(){
$(document).unbind('mousemove');
$(this).css({'opacity':'1'});
});
});
رویداد keydown هنگامی اجرا میشه که یکی از دکمه‌های کیبرد فشار داده بشه و به صورت زیر استفاده میشه:
$('selectror').keydown(handler);
که handler تابعی هست که وقتی اون رویداد انجام بشه، اتفاق میفته.
اول از رویداد keydown استفاده شده، یعنی هر وقت که یک از دکمه‌های کیبرد به پایین رفت باید تابعی اجرا بشه..
بعد با شرط‌ها چک میشه که دکمه ای که فشار داده شده شناسایی بشه…
$(document).keydown(function(e){
e.keyCode
)};
این کد همیشه یه عدد رو برمیگردونه و شما باید با شرط‌ها اون رو شناسایی کنید.
اگه دکمه چپ فشار داده شده باشه، مقدار 37 برگردونده میشه و توی بلاک مربوط به این شرط دستور داده میشه که با تابع animate مقدار چپ اون المنت رو در عرض سه میلی ثانیه پنج واحد کم کنه…
[remind]وقتی کد به این شکل نوشته شده باشه…
{'top':'-=5'}
یعنی مقدار top اون المنت هر چقدر که بود 5 واحد از اون کم کن، و توجه داشته باشید به این دلیل مقدار اجرای animation رو کم نوشتم چون ممکنه پس از برداشتن دستتون از روی دکمه‌های بالا و پائین و چپ و راست باز هم همچنان انیمیشن اجرا بشه…
[/remind]
چون توی کد نویسی‌ها معمولاً مقادیری که به برای موقعیت دهی استفاده میشه top و left هست و اگه شما توی کدنویسی خودتون از مقادیری غیر از این دو استفاده کردید، باید این کد رو متناسب با نیازتون تغییر بدید.
اگر دکمه بالا رو فشار بدید، مقدار 38 و اگر دکمه راست رو فشار بدید مقدار 39 و اگر دکمه پایین رو فشار بدید مقدار 40 برگردونده میشه که به همون شیوه ای که در بالا توضیح دادم المنت موردنظر به بالا و پائین یا چپ و راست حرکت میکنه.
سعی کنید به جای استفاده از کلاس draggable از کلاس‌های دیگه ای استفاده کنید چون اگه چند تا المنت با همین کلاس داشته باشید، یکدفعه همشون با هم حرکت می‌کنند.
و در اینجا رویداد keydown تموم میشه و متحرک سازی المنت با کیبرد به پایان میرسه…
در اینجا می‌خواهیم Drag کردن با ماوس رو پیاده سازی کنیم… امیدوارم که خسته نشده باشید 😀
اول از رویداد mousedown استفاده شده، یعنی وقتی کلیک شد(حالا فرقی نمی‌کنه چه راست کلیک چه کلیک کردن با دکمه چپ) و استفاده از این رویداد سلیقه ای هست و میتونید به جای این رویداد از click هم استفاده کنید.
بعد مقدار اون شیئی رو که روی اون کلیک شده رو توی یک متغیر به نام thisElement ریختم.در برنامه نویسی سعی کنید این کار رو انجام بدید، در صورتی که به جای this از همون گزینشگر بالایی استفاده کنید مشکلاتی در اجرا پیش میاد..مثلاً ممکنه شما هشت تا المنت رو کلاس draggable دادید و وقتی شما یک رو drag می‌کنید، اون هفت تا المنت هم راه میفتند و یه وضع ناجوری توی صفحه تون پیش میاد.حالا جالبه بدونید که این this که توی متغیر ذخیره شده با سایر this هایی که توی کد هست فرق میکنه.حالا جلوتر که بریم متوجه میشید…
در خط بعدی دستور داده میشه که وقتی ماوس روی سند حرکت کرد تابعی رو به اجرا دربیاره
$('selector').mousemove(handler)
دلیلش اینه در جی کوئری رویدادی وجود نداره که هر دو کار رو با هم انجام بده، یعنی رویدادی که وقتی روی المنت کلیک شد و ماوس حرکت کرد، اجرا بشه. در ضمن اجرای رویداد دوم وابسته به رویداد اول هست یعنی تا وقتی اولی اجرا نشه دومی هم اجرا نمیشه.
به این نکته هم توجه داشته باشید، به این دلیل از 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 باشه که هیچ اتفاقی نمیفته…
در ضمن jQuery مقادیر margin و padding رو با px بر می‌گردونه که با استفاده از تابع parseFloat این رشته ی عددی رو به عدد تبدیل میکنه و px رو از آخر اون حذف میکنه.
اگر می‌خواهید اعداد بدون قسمت اعشاری برگردانده شوند از تابع parseInt استفاده کنید.
سپس با استفاده از e.pageX و e.pageY موقعیت ماوس در هر لحظه برگردونده میشه، و با استفاده از متغیرهای a و b و یک منهای ساده ماوس المنت موقعیت دهی میشه.
سپس با تابع CSS موقعیت این المنت رو در صفحه مشخص می‌کنیم. مقدار top رو برابر با y و مقدار left رو برابر با x،در ضمن opacity اون المت رو هم کم کردم چون به نظر من جلوه ی بهتری داره.
[remind]رویداد mousemove پشت سرهم و مکرر اجرا میشه و مقدار‌های جدیدی در متغیرهای x و y قرار میگیره.
[/remind]
خب در اینجا drag کردن تموم شد، ولی اگه دقت کنید این المنت حتی بعد از برداشتن دستتون از روی دکمه ماوس هم Drag میشه…اشکال کجاست؟؟
باید رویداد mousemove رو لغو کنید. که در خط بعدی همین کار انجام شده…
$('selector').mouseup(handler);
تابع unbind کنترلگر رویدادهایی(event handler) رو که قبلاً اجرا شده حذف میکنه و یک پارامتر میگیره و اون پارامتر هم همان کنترلگر رویدادی است که حذف میشه.
$('selector').unbind(event);
حالا موقعی که دکمه ماوس رها میشه،با تابع unbind دستور دادیم که کنترلگر رویداد mousemove رو برای document لغو کن و opacity اون المنت رو به حالت اولیه که 1 هست برگردون.
اینجا دیگه از میتونید از this استفاده کنید چون مستقیماً برمیگرده به همون draggable .
می تونید همه ی فایل‌های لازم رو یکجا از زیر دانلود کنید :
[vip][dl]دانلود کدهای این آموزش[/dl][/vip]
هر مشکل و سوالی که داشتید در قسمت نظرات مطرح کنید…
از کجا دانلود کنم؟؟؟؟؟؟؟؟؟
ایا باید style.css را هم دانلود کنیم؟؟؟؟؟؟؟؟؟؟؟؟؟
سپاس...
jquery-1.10.2.min.js
این کار هم خیلی جالبه...
فقط ممکنه آدرس ایمیل کاری تون رو برای بحث و تبادل رو داشته باشم؟
سوالی داشتم .
اگه بخوایم کاری بکنیم که یک محدوده ای داشته باشه مثلا 20px از سمت راست بیش تر جدا نشه باید چی کار کنیم؟
لطفا با ایمیل من تماس بگیرید:
majidmajid809@yahoo.com
با تشکر