ورود

View Full Version : تغییر مکان دو div به صورت dragable


محمد شهرکی
چهارشنبه 02 فروردین 1391, 16:18 عصر
سلام دوستان من تو سایت jquery‌ که رفتم در قسمت dragable تونستم چنین کدی رو بگیرم اما این کد نیازه منو بر طرف نمی کنه من می خوام وقتی که یک div‌ رو درگ کردم و به سمت div دیگری بردم مکان این دو با هم عوض بشه خوشحال میشم کمکم کنید


<script src="script/jquery/js/jquery-1.4.2.min.js"></script>
<script src="script/jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="script/jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="script/jquery/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="script/jquery/development-bundle/ui/jquery.ui.draggable.js"></script>
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
});
</script>
</head>
<body>

<div class="demo">

<div id="draggable" class="ui-widget-content">
<p>Revert the original</p>
</div>

<div id="draggable2" class="ui-widget-content">
<p>Revert the helper</p>
</div>

</div><!-- End demo -->
EMERTAT
چهارشنبه 02 فروردین 1391, 16:43 عصر
شما باید div اول drogable کنید و div دوم dropable حالا توی رویداد div , drop دوم بنویسی که جای تگ ها عوض بشه

بری توی سایت jquery ui می تونی چیزی که می خوای پیدا کنی
EMERTAT
چهارشنبه 02 فروردین 1391, 17:45 عصر
اینم یه کد نمونه چیزی که می خوای


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript" language="javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="Stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script>
$(document).ready(function () {
$('#div1').draggable({ revert: true });
$('#div2').draggable({ revert: true });
$('#place1').droppable({});
$('#place2').droppable({});
$('#place1').bind('drop', function (event, info) {
$("#place1").children("*").appendTo($("#place2"));
$(info.helper).appendTo($("#place1"));
});
$('#place2').bind('drop', function (event, info) {
$("#place2").children("*").appendTo($("#place1"));
$(info.helper).appendTo($("#place2"));
});
});
</script>

<style>
#div1
{
background-color: #FF66FF;
height: 200px;
width: 200px;
margin:auto;
}
#div2
{
background-color: #FF9900;
height: 200px;
width: 200px;
margin:auto;
}
#place1
{
border:1px solid #000000;
height: 220px;
width: 220px;
padding:1px;
}
#place2
{
border:1px solid #000000;
height: 220px;
width: 220px;
padding:1px;
}
</style>
</head>

<body>
<div id="place1">
<div id="div1"></div>
</div>
<br />
<br />
<br />
<br />
<br />
<div id="place2">
<div id="div2"></div>
</div>
</body>

</html>
محمد شهرکی
جمعه 11 فروردین 1391, 11:26 صبح
سلام دوست عزیز . مرسی از کدی که قرار دادی . اما یه مشکلی داره اونم اینه که وقتی که دیو بالایی رو به سمته دیگه پایینی درگ می کنم و رها می کنم ،‌ این حالت Revert ی که دارن دقیقا از همون محل اعمال نمیشه . بزار بیشتر توضیح بدم وقتی که دیو بالا رو می کشم به سمت دیو پایین ،‌ جاشون عوض میشه اما دیو بالایی که الان باید در پایین مستقر بشه از بالا به پایین نمیاد بلکه از پایین به بالا میره . و همینطور برعکس وقتی که دیو پایینی رو درگ می کنم به سمت دیو بالایی زمانی که رها می کنم از بالا به پایین تغییر مکان می دن . نمیدونم متوجه منظورم شدید یا نه . به هر حال من می خواستم که تغییر که انجام میشه دقیقا از محل دقیقه خودشون اتفاق بیافته
salehi-ali
جمعه 11 فروردین 1391, 23:19 عصر
بری توی سایت jquery ui می تونی چیزی که می خوای پیدا کنی
محمد شهرکی
شنبه 12 فروردین 1391, 00:24 صبح
بری توی سایت jquery ui می تونی چیزی که می خوای پیدا کنی
سلام . بابا این چه طرزه راهنمایی کردنه اگر قرار بود برم اونجا دیگه مشکلم رو اینجا مطرح نمی کردم . ما از صبح امروز منتظره راهنمایی هستیم اما کسی پیدا نشد که به ما کمک کنه متاسفانه فعالیت بخش jquery خیلی پایینه
محمد شهرکی
شنبه 12 فروردین 1391, 22:42 عصر
کسی پیدا نمیشه مشکل ما رو حل کنه !!!!
EMERTAT
دوشنبه 14 فروردین 1391, 00:30 صبح
کاری رو که دقیقاً می خوای انجام بدی بهم بگو

مثلاً می خوام این قابلیت تو سایتم بزارم

اونم یه راه دیگه داره

دقیقاً بگو تا کدش بنویسم

ایمیل واسه اینجور موقع ها گذاشتن :لبخند:
محمد شهرکی
دوشنبه 14 فروردین 1391, 02:37 صبح
سلام دوست عزیز . توضیح شاید یه مقدار سخت باشه . ببین کدت درسته اما یه ایراد داره . تو کدی که بهم دادی دو تا دیو هستش که می تونی با درگ مکانشون رو عوض کنی . اما فرض کن من دیو پایینی رو به سمت دیو بالایی درگ می کنم و بعد رها می کنم خوب اتفاقی که باید بیافته اینکه دیو بالایی با حالت Revert از مکانش خودش به سمت دیو پایین تغیر مکان بده ،‌این اتفاق نمی افته بلکه وقتی شما رها می کنی دیو بالایی از یک مسیر نامشخص تغییر مکان پیدا می کنه . شما خودت یک بار تست کن رو کدی که دادی متوجه میشی . من دقیقا می خوام دو تا دیو بعد از drop شدن از همون نقطه ای که هستن تغییر مکان بدن . الان دو سه روز درگیر این موضوعم اما متاسفانه کسی نبود پاسخگو باشه ممنون میشم کمکم کنی
EMERTAT
دوشنبه 14 فروردین 1391, 10:43 صبح
دیشب چند بار خوندم و تست کردم

اگه منظورت فهمیده باشم نمی خوای این اتفاق ناگهانی اتفاق بیفته بلکه می خوای با جوری انیمیشن اتفاق بیفته

یعنی کاربر ببینه جای این دو تا عوض می شه

نه یهو جاشون عوض بشه

درست فهمیدم ؟
محمد شهرکی
دوشنبه 14 فروردین 1391, 12:49 عصر
سلام . ببین من نمی خوام حالت انیمیشن مثل fade و غیره داشته باشه ،‌ فقط اینکه مثلا وقتی دیو بالایی باید به جای دیو پایینی عوض میشه از مکانه خودش آرام آرام به سمت دیو پایین تغییر مکان بده . تو این کد وقتی دیوپایین رو به سمت بالا درگ می کنی بعد رها کردن دیو بالایی از بالاترین نقطه صفحه به سمت دیو پایین حرکت میکنه نه از مکانه خودش .
دوست عزیز شرمنده دیگه نمی دونم چجوری توضیح بدم . امیدواریم متوجه شده باشی