الگوریتم جابجایی اشیاء در صفحه با ماوس

[Mahnet]

عنوان : جابجایی اشیا در صفحه با ماوس
با سلام
شما می تونی از تابع drag توی زبان برنامه نویسی استفاده کنین و یا اگر مایل هستین خودتون برنامه نویسی کنین تا پایان این بخش با من باشین ...
الگوریتم برنامه :
1- از event های mousedown و mouseup و mousemove برای این برنامه استفاده کنین.
2- متغیری از نوع boolean تعریف کنین که اگر mousedown بود مقدارش true و اگر mouseup بود مقدارش false بشه.
3- زمانی که mousedown شد و متغیر boolean مقدارش false بود موقعیت X و Y ماوس رو از موقعیت left و top شی مورد نظر در صفحه کم کنین و در جایی ذخیره کنین.(این کار برای اینه که موقعیت ماوس رو زمانی که mousedown میشه نسبت به اون شی برای اولین لحظه داشته باشیم)
4- زمانی که می خواین یک شی رو جابجا کنین ابتدا متغیر boolean رو چک کنین که آیا mousedown هست یا نه اگر بود و اگر mousemove شد اونوقت موقعیت X و Y ماوس فعلی رو از مقدارهای ذخیره شده در مرحله سوم کم کنین تا موقعیت left و top فعلی شی مورد نظر به دست بیاد و اون ها رو set کنین ...
5- این الگوریتم با jQuery به شکل زیر هست....

var isMouseDown = false;
var X,Y;
$(document).ready(function() {
$('.window').mousedown(function(e){
if(!isMouseDown){
isMouseDown = true;
var objPos = $(this).offset();
X = (e.pageX - objPos.left);
Y = (e.pageY - objPos.top);
}
});

$('body').mousemove(function(e){
if(isMouseDown){
var objX = e.pageX-X;
var objY = e.pageY-Y;
$('.window').offset({ left: objX, top: objY });
}
});

$('.window').mouseup(function(e){
if(isMouseDown){
isMouseDown = false;
}
});

});

6- دقت کنین که اگر برنامه تون تحت وب هست حتما position شی مورد نظر از نوع absolute یا fixed باشه که در اینجا شی من یک div از کلاس window هست.

.window {
position : absolute;
}

7- این هم یک demo از این الگوریتم با jQuery ....
احتمالا الگوریتم های مناسب تری هم وجود داره ...
موفق باشین...

[Mahnet]

عنوان :تغییر اندازه اشیا در صفحه با ماوس
با سلام
در ادامه بحث فوق گفتن الگوریتم تغییر اندازه ی شی خالی از لطف نیست ... این الگوریتم کاملا مثل قبلی است با این تفاوت که در مرحله چهارم به جای set کردن موقعیت، اندازه های شی set میشن ...

var isResizable = false;
$('.window .footer').mousedown(function(e){
if(!isResizable){
isResizable = true;
X = e.pageX;
Y = e.pageY;
}
});
$('body').mousemove(function(e){
if(isResizable){
var objPos = $('.window').offset();
if(objPos.left + 200 < e.pageX){
var winWidth = $('.window').width();
var objX = winWidth + e.pageX - X;
$('.window').width(objX);
X = e.pageX;
}
if(objPos.top + 200 < e.pageY){
var winHeight = $('.window').height();
var objY = winHeight + e.pageY - Y;
$('.window').height(objY);
Y = e.pageY;
}
}
});
$('body').mouseup(function(e){
if(isResizable){ isResizable = false;}
});

شما خیلی راحت می تونین یک سری window با قابلیت های متفاوت با این الگوریتم ها داشته باشین...

این هم ادامه ی demo ی قبل شامل تغییر اندازه و جابجایی شی در صفحه با ماوس ...
موفق باشین

[L u k e]

فقط یه مشکل هست که وقتی یه شی رو جابه جا می کنی چون کلیک موس پایینه متن ها زیرش رو Select می کنه

[Mahnet]

فقط یه مشکل هست که وقتی یه شی رو جابه جا می کنی چون کلیک موس پایینه متن ها زیرش رو Select می کنه
دوست عزیز این الگوریتم ها فقط برای دادن یه ذهنیت در مورد کار با اشیا در صفحه هست، اینکه متن های زیرش select میشه خب بدیهی است، چون این الگوریتم هیچ کنترلی روی text های تو صفحه نداره ...
اما راه حل بنده برای مشکل شما بسیار ساده هست، کافیه که در انتهای هر تابع mousedown مقدار false رو برگردونید ... به اینصورت که برای جابجایی :

// move and drag window
$('.window .header').mousedown(function(e){
if(!isMouseDown){
isMouseDown = true;
var objPos = $(this).offset();
X = (e.pageX - objPos.left);
Y = (e.pageY - objPos.top);
}
return false;
});

و برای تغییر اندازه :

// resize window
var isResizable = false;
$('.window .footer').mousedown(function(e){
if(!isResizable){
isResizable = true;
X = e.pageX;
Y = e.pageY;
}
return false;
});

را داشته باشیم ...
موفق باشین

[Mahnet]

عنوان : چرخش اشیا در صفحه با ماوس
سلام دوباره
ممنون از لطفتون که مطالب تاپیک رو دنبال میکنین ... امروز قصد دارم برای اشیاء امکان دوران و چرخش بزارم ... خیلی ساده است، الگوریتمش مثل قبلی هاست و تنها یه محاسبه ی ریاضی در تابع mousemove اضافه میشه. این الگوریتم تنها در مرورگر هایی که از css3 پشتیبانی میکنن قابل اجراست.
در بخش mousemove زاویه دوران از رابطه زیر به دست میاد...

Math.atan((e.pageY - Y) / (e.pageX - X)) * 180

همونطور که می بینین مقدار محاسبه شده در Math.atan که همون آرک تانژانت خودمونه بر حسب رادیان هست که در 180 ضرب میشه تا بر حسب درجه باشه... این الگوریتم برنامه...

var isRotatable = false;
$('.window .footerLeft').mousedown(function(e) {
if(!isRotatable){
isRotatable = true;
X = e.pageX;
Y = e.pageY;
}
});
$('body').mousemove(function(e){
if(isRotatable){
var degree = Math.atan((e.pageY - Y) / (e.pageX - X)) * 180;
$('.window').css({'-webkit-transform': 'rotate('+degree+'deg)','-o-transform': 'rotate('+degree+'deg)','-moz-transform': 'rotate('+degree+'deg)'});
}
});
$('body').mouseup(function(e){
isRotatable = false;
});

این هم demo با قابلیت دوران، جابجایی و تغییر اندازه ....
البته من مقدار return false رو برای عدم انتخاب متن های زیر شی که در پست قبلیم فرستادم رو توی تابع mousedown قرار ندادم اگه میخواید متن زیرش انتخاب نشه مثل قبلی ها بنویسین :

$('.window .footerLeft').mousedown(function(e) {
if(!isRotatable){
isRotatable = true;
X = e.pageX;
Y = e.pageY;
}
return false; // ---------> اینجا
});

موفق باشین...