جابه جایی یک div

[mahlake]

سلام دوستان من یک صفحه وب دارم که دارای یک div اصلی هست که درون اون ۶ تا div هست....

div اصلی رو طول و عرض ۱۰۰٪ دادم و div های داخلی رو هر کدام رو طول و عرض 100px داده ام که درون هر کدام از div های ۱۰۰ پیکسلی یک عکس با همین سایز ((100px)) وجود داره...

حالا من این div ها رو با خاصیت های left, right, top , bottom کنار هم قرار دادم البته قبلش position اونها رو absolute قرار دادم. حالا میخوام وقتی با موس روی اونها کلیک کردم و موس رو حرکت دادم بسته به میزان حرکت موس مقدار خاصیت های left, right, top , bottom تغییر کند....

خواهش میکنم کمکم کنید آبروم در میان هست...:گریه::گریه::گریه:

دچار توفیق اجباری شدم....:افسرده:

اکه حرکت دادن یک دیو رو هم با اصولی که توضیح دادم بفرمایید کافی هست....

پیشاپیش از کمکتون ممنون

[mahlake]

من واقعا نمیدونم چرا پست های من رو کسی جواب نمیده... حتی ۴ تا فهش هم نمیدن که آدم بدونه یکی خونده متن رو... نمیدونم کسی حوصله جواب دادن نداره یا که سوالم پیش پا افتادس یا انقدر مهمه که اونم که بلده نمیخواد کس دیگه ای یاد بگیره... ترو خدا من مدت ها ست دارم تو نت دنبال این بخش میگردم اما به نتیجه ای نرسیدم... ترو خدا کمک کنید........

[***BiDaK***]

من واقعا نمیدونم چرا پست های من رو کسی جواب نمیده... حتی ۴ تا فهش هم نمیدن که آدم بدونه یکی خونده متن رو... نمیدونم کسی حوصله جواب دادن نداره یا که سوالم پیش پا افتادس یا انقدر مهمه که اونم که بلده نمیخواد کس دیگه ای یاد بگیره... ترو خدا من مدت ها ست دارم تو نت دنبال این بخش میگردم اما به نتیجه ای نرسیدم... ترو خدا کمک کنید........
این دمو (http://jsfiddle.net/N6HAF/3/) رو ببین.
من اینجوری برداشت کردم.
بازم اگه منظورتون این نیست توضیح بیشتری بدید و کدتونو بذارید.

[mahlake]

این دمو (http://jsfiddle.net/N6HAF/2/) رو ببین.من اینجوری برداشت کردم.بازم اگه منظورتون این نیست توضیح بیشتری بدید و کدتونو بذارید.سلام مرسی جناب بی باک بابت وقتی که برای بنده میگذارید....این کد تقریبا به چیزی که من میخواستم نزدیک بود مرسی اما یه نگاه به این آدرس بندازید: www.map.tehran.irنقشه تهران تو یک دایو کلی قرار گرفته. که توی این دایو کلی چندین دایو کوچک قراردارد که درونشون تیکه های نقشه قرار دارد. حالا وقتی کلیک میکنید موقعیت این دایو ها تغییر میکنه... من میخواستم بدونم که این اتفاق چطور رخ میده... و توی یکی از کارهام به این موضوع نیاز دارم... خودم برنامه نویس ویندوز هستم... jquery کار ما ناغافل ول کرد رفت و این کار افتاد گردن من و تا چند روز دیگه باید تحویلش بدم... کد رو هم هنوز هیچ کد jquery ننوشتم فعلا فهمیدم که چطور عکس ها رو مثل این نقشه بچینم و این که فلصفه اش چی بوده... ولی خودم دارم روی یک کد کار میکنم که اگه کار کرد تا فردا براتون میگذارمش... من jqury زیاد بلد نیستم فقط میفهممش... یعنی میدونم کد چیکار میکنه اما تاحالا به این شدت درگیرش نشده بودم

[***BiDaK***]

سلام مرسی جناب بی باک بابت وقتی که برای بنده میگذارید....این کد تقریبا به چیزی که من میخواستم نزدیک بود مرسی اما یه نگاه به این آدرس بندازید: www.map.tehran.irنقشه (http://www.map.tehran.irنقشه) تهران تو یک دایو کلی قرار گرفته. که توی این دایو کلی چندین دایو کوچک قراردارد که درونشون تیکه های نقشه قرار دارد. حالا وقتی کلیک میکنید موقعیت این دایو ها تغییر میکنه... من میخواستم بدونم که این اتفاق چطور رخ میده... و توی یکی از کارهام به این موضوع نیاز دارم... خودم برنامه نویس ویندوز هستم... jquery کار ما ناغافل ول کرد رفت و این کار افتاد گردن من و تا چند روز دیگه باید تحویلش بدم... کد رو هم هنوز هیچ کد jquery ننوشتم فعلا فهمیدم که چطور عکس ها رو مثل این نقشه بچینم و این که فلصفه اش چی بوده... ولی خودم دارم روی یک کد کار میکنم که اگه کار کرد تا فردا براتون میگذارمش... من jqury زیاد بلد نیستم فقط میفهممش... یعنی میدونم کد چیکار میکنه اما تاحالا به این شدت درگیرش نشده بودم
سلام.بیدک هستم:لبخند:
من فک کردم مثل منو در یک راستا میخواد حرکت کنه.
این دمو (http://jsfiddle.net/N6HAF/4/)رو ببینید.
یک نکته.برای draggable به jqueryUI نیاز دارید که فایلشو از سایت خود jqeury.com میتونید بگیرید.

[mahlake]

این دمو (http://jsfiddle.net/N6HAF/2/) رو ببین.من اینجوری برداشت کردم.بازم اگه منظورتون این نیست توضیح بیشتری بدید و کدتونو بذارید.واقعا ممنون من کمی کد شما رو تغییر دادم و خودم یک کد ساختم که دقیقا کاری که من میخواستم رو میکرد کد خودتون رو با کمی تغییر براتون میگذارم اگه ایرادی داره یا نکته ای هست که باید بدونم لطفا کمکم کنید....مرسی از لطفتون

کد شما پس از تغییرات:
http://jsfiddle.net/mahlake/N6HAF/6/

ببخشید فقط یک سوال من این کد ها رو به این صورت انتقال دادم اما کد jqurey اجرا نمیشه چرا؟




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.dv
{
height: 100px;
width: 100px;
background-color: red;
cursor: pointer;
}
.main
{
width: 100px;
height: 300px;
}
.draggable
{
margin: 10px;
width: 100%;
height: 400px;
background-color: black;
overflow:hidden
}
</style>
</head>
<script type="text/javascript">

$("#draggableDivs #move").each(function(){
$(this).draggable({
containment: 'parent',
cursor: 'move'
})
});
</script>
<body>
<div id="draggableDivs" class="draggable">
<div class="main" id="move">
<div class="dv" id="one"></div>
<div class="dv" id="one"></div>
<div class="dv" id="one"></div>
</div>
</div>
</body>
</html>

[mahlake]

سلام.بیدک هستم:لبخند:
من فک کردم مثل منو در یک راستا میخواد حرکت کنه.
این دمو (http://jsfiddle.net/N6HAF/4/)رو ببینید.
یک نکته.برای draggable به jqueryUI نیاز دارید که فایلشو از سایت خود jqeury.com میتونید بگیرید.

اخ ببخشید اشتباه خوندم... :گیج::لبخند:

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

[mahlake]

سلام.بیدک هستم:لبخند:
من فک کردم مثل منو در یک راستا میخواد حرکت کنه.
این دمو (http://jsfiddle.net/N6HAF/4/)رو ببینید.
یک نکته.برای draggable به jqueryUI نیاز دارید که فایلشو از سایت خود jqeury.com میتونید بگیرید.

اخ ببخشید اشتباه خوندم... :گیج::لبخند:

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

[***BiDaK***]

البته نیازی هم به parent و each هم نیست.میتونید هر چندتا دیو دارید در داخل یک دیو قرار بدید و دیو parent رو draggable کنید.در مورد parent هم اون نمونه ای که نششون دادید هیچ محدوده ای نداشت و آزاد جابجا میشد.البته اینم دیگه بستگی به خودتون داره.اما برای اجرای کدهای jquery شما باید فایل jquery و jquery UI رو ازسایت jquery بگیرید و در تگ head بیارید.البته از این دوتا تگ هم میتونید استفاده کنید.
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

راه دیگش هم که فایل هارو دانلود میکنید و داخل این تگ آدرس پوشه و این دوتا فایل رو میدید.

[***BiDaK***]

این کارو با ajax و همینطور دستور append میتونید انجام بدید.
از پلاگین های ساحته شده هم میتونید استفاده کنید.
سرچ کنید تو گوگل jquery data load page while scrolling

[mahlake]

البته نیازی هم به parent و each هم نیست.میتونید هر چندتا دیو دارید در داخل یک دیو قرار بدید و دیو parent رو draggable کنید.در مورد parent هم اون نمونه ای که نششون دادید هیچ محدوده ای نداشت و آزاد جابجا میشد.البته اینم دیگه بستگی به خودتون داره.اما برای اجرای کدهای jquery شما باید فایل jquery و jquery UI رو ازسایت jquery بگیرید و در تگ head بیارید.البته از این دوتا تگ هم میتونید استفاده کنید.
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

راه دیگش هم که فایل هارو دانلود میکنید و داخل این تگ آدرس پوشه و این دوتا فایل رو میدید.


این دوتا تگ رو هم گذاشتم اما هنوز کد jquery اجرا نمیشه.... :گریه:

[mahlake]

این کارو با ajax و همینطور دستور append میتونید انجام بدید.
از پلاگین های ساحته شده هم میتونید استفاده کنید.
سرچ کنید تو گوگل jquery data load page while scrolling

مرسی این مشکل هم حل شد... :لبخند::قلب:

[***BiDaK***]

این دوتا تگ رو هم گذاشتم اما هنوز کد jquery اجرا نمیشه.... :گریه:
مشکلتون حل شد؟؟
ترتیب اون کد ها هم مهمه.

[mahlake]

سلام من یک سوال کوچیک دیگه برام پیش اوومده و اون اینه که من میتونم دایو داخل دایو اصلی رو حتی تا خارج از دایو اصلی هم ببرم و مشکل همینجاست... من میخوام دایو داخلی که از دایو های رنگی پر شده است فقط تا جایی حرکت کند که از چپ یا راست یا بالا و یا پایین با دایو اصلی که بک گراند مشکی دارد مماس شود. این مثال رو نگاه کنید: http://jsfiddle.net/mahlake/N6HAF/12/
دیو را هر چقدر که بخواهید میتونید جابه جا کنید اما من میخوام تا حدی جا به جا بشه که دایو زیری که با رنگ مشکی هست مشخص نشود.

[***BiDaK***]

width و height دیو parent و دیو move رو بدست میاری و تفاوت width و height رو بدست میاری:


var moveH = $('#move').height();
var parH = $('.parent').height();
var moveW = $('#move').height();
var parW = $('.parent').width();
var ipH = moveH-parH-8;
var ipW = moveW-parW-8;
alert(ipH+' '+ipW);

8- که گذاشتم چون دیدم وقتی drag میکنیم 8px- از top و left فاصله میگیره.این عدد مخصوص این سایزه همه جا یک مقدار نیست.
مقادیری که بدست اوردی رو میتونی در containment جا گذاری کنی.فرم containment هم به این صورت هست:

containment[left , top , right, bottom]
و همون draggable رو میذاری:

$("#move").draggable({ containment: [-ipW, -ipH, 0, 0], scroll: false });
اینم دمو (http://jsfiddle.net/N6HAF/17/).

[mahlake]

width و height دیو parent و دیو move رو بدست میاری و تفاوت width و height رو بدست میاری:


var moveH = $('#move').height();
var parH = $('.parent').height();
var moveW = $('#move').height();
var parW = $('.parent').width();
var ipH = moveH-parH-8;
var ipW = moveW-parW-8;
alert(ipH+' '+ipW);

8- که گذاشتم چون دیدم وقتی drag میکنیم 8px- از top و left فاصله میگیره.این عدد مخصوص این سایزه همه جا یک مقدار نیست.
مقادیری که بدست اوردی رو میتونی در containment جا گذاری کنی.فرم containment هم به این صورت هست:

containment[left , top , right, bottom]
و همون draggable رو میذاری:

$("#move").draggable({ containment: [-ipW, -ipH, 0, 0], scroll: false });
اینم دمو (http://jsfiddle.net/N6HAF/17/).


مرسی ممنون حل شد واقعا کمکتون فوق العاده بود... واقعا ممنون... اینم کد نهایی هست:
http://jsfiddle.net/mahlake/KGA6k/4


ولی هنوز مشکل لود عکس دارم که یک پست جدید برای این موضوع درست کردم که دیگران هم اگه به این مشکل خوردن بتونن با یه سرچ به راحتی از کمک ها و راهنمایی های شما دوستان استفاده کنن...
اینم لینکش:
http://barnamenevis.org/showthread.php?444219-%D8%B9%D8%AF%D9%85-%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3-%D9%87%D8%A7%DB%8C-%D8%AA%D9%88-overflow
امیدوارم که بازم سوالات من روپوشش علمی بدید... :گیج::لبخند::کف::تشویق::چشمک::� �لب: