PDA

View Full Version : جابجا كردن چندين div با جي كوئري


AmirGhasemi
سه شنبه 04 تیر 1392, 09:27 صبح
سلام دوستان
من نه تا div دارم كه مي خوام وقتي كاربر روي هر كدامشان كليك كرد و ان را به گوشه ديگري از صفحه كشيد 8 تا بقيه div‌ها هم به محل جديد منتقل شوند
من حركت دادن يك div‌را نوشته ام اما نمي دونم چطوري اونو بايد به 9 تا تعميم بدم
ممنون ميشم راهنمايي بفرماييد
كدش هم اينه::::


<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link href="/resources/demos/style.css" rel="stylesheet" />
<style>
.draggable
{
width: 150px;
height: 150px;
padding: 0.5em;
border: 2px solid #59c2ff;
}

</style>

<script>

$(function() {
$(".draggable").draggable();


});
</script>

</head>
<body>


<div id="01" class="draggable">
<p>
منو بكش و رها كن</p>
</div>
<div id="02" class="draggable">
<p>
منو بكش و رها كن</p>
</div>

</body>
General-Xenon
سه شنبه 04 تیر 1392, 10:10 صبح
سلام دوست من .

<script>

var iX = 0, iY = 0;
var divArr = new Array("drg0", "drg1");
$(".draggable").draggable({
stop: function () {
var a = $(this);
iX = a.position().left;
iY = a.position().top ;
$(divArr).each(function (i) {
if (divArr[i].toLowerCase() != a.attr("id").toLowerCase()) {
$("#" + divArr[i]).animate({ "top": iY, "left": iX },"slow");
}
});
}
});
</script>
AmirGhasemi
سه شنبه 04 تیر 1392, 10:44 صبح
ممنون دوست عزيز
ولي هر كاري كردم اصلا در صفحه حركت نمي كند
در ضمن من مي خواهم با حركت دادن يك المنت بقيه المنت ها هم حركت كنند كه اين كد شما اينگونه نيست
General-Xenon
سه شنبه 04 تیر 1392, 10:46 صبح
ممنون دوست عزيز
ولي هر كاري كردم اصلا در صفحه حركت نمي كند
در ضمن من مي خواهم با حركت دادن يك المنت بقيه المنت ها هم حركت كنند كه اين كد شما اينگونه نيست

ببین دوست عزیز این یک مثال ساده . موفق باشی

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title></title>
</head>
<body style="position:relative;">
<form id="form1" runat="server">
<div style="width:100px; height:100px; position:absolute; background-color:#ffd800;" id="drg0" class="draggable">

</div>
<div style="width:100px; height:100px; position:absolute; background-color:#f00;" id="drg1" class="draggable">

</div>
</form>
<script>

var iX = 0, iY = 0;
var divArr = new Array("drg0", "drg1");
$(".draggable").draggable({
start: function () {
var a = $(this);
},
stop: function () {
var a = $(this);
iX = a.position().left;
iY = a.position().top ;
$(divArr).each(function (i) {
if (divArr[i].toLowerCase() != a.attr("id").toLowerCase()) {
$("#" + divArr[i]).animate({ "top": iY, "left": iX },"slow");
}
});
}
});
</script>
</body>
</html>
AmirGhasemi
سه شنبه 04 تیر 1392, 11:29 صبح
الهي من قربونت بشم
داداش دستت در نكنه دقيقا همينو مي خواستم
خداييش ممنونم
فقط يه سوال
من يه جدول 3 در 3 از اين div مي خوام كه وقتي هر كدام از divها را تكان مي دهي بقيه با حفظ همان حالت قبلي جابجا بشوند يعني هميشه جدول 3 در 3حفظ شود
اين مثال شما را تبديل به جدول سه در سه كردم اما بعد جابجايي يكي شون بقيه ميان پشت اون قرار مي گيرن
اگه ممكن هست اين يه مورد را هم برام حل كن
دستت درد نكنه انشالله جبران كنم
AmirGhasemi
سه شنبه 04 تیر 1392, 11:38 صبح
دوست عزيز
شرمنده يعني مي خوام كه همواره با جابجايي هر div حتما و حتما حالت 3 در 3 حفظ شود
General-Xenon
سه شنبه 04 تیر 1392, 11:48 صبح
الهي من قربونت بشم
داداش دستت در نكنه دقيقا همينو مي خواستم
خداييش ممنونم
فقط يه سوال
من يه جدول 3 در 3 از اين div مي خوام كه وقتي هر كدام از divها را تكان مي دهي بقيه با حفظ همان حالت قبلي جابجا بشوند يعني هميشه جدول 3 در 3حفظ شود
اين مثال شما را تبديل به جدول سه در سه كردم اما بعد جابجايي يكي شون بقيه ميان پشت اون قرار مي گيرن
اگه ممكن هست اين يه مورد را هم برام حل كن
دستت درد نكنه انشالله جبران كنم

http://aksup.ir/images/0tgmnk3s86byz0ih34qt.png
اینم خدمت شما ...
<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title></title>
</head>
<body style="position:relative;">
<form id="form1" runat="server">
<div style="top:0px; left:0px; width:100px; height:100px; position:absolute; background-color:#ffd800;" id="div0" class="draggable"></div>
<div style="top:100px;left:0px;width:100px; height:100px; position:absolute; background-color:#b6ff00;" id="div1" class="draggable"></div>
<div style="top:200px;left:0px;width:100px; height:100px; position:absolute; background-color:#f00;" id="div2" class="draggable"></div>
<div style="top:0px;left:100px;width:100px; height:100px; position:absolute; background-color:#0094ff;" id="div3" class="draggable"></div>
<div style="top:100px;left:100px;width:100px; height:100px; position:absolute; background-color:#4800ff;" id="div4" class="draggable"></div>
<div style="top:200px;left:100px;width:100px; height:100px; position:absolute; background-color:#b200ff;" id="div5" class="draggable"></div>
<div style="top:0px;left:200px;width:100px; height:100px; position:absolute; background-color:#808080;" id="div6" class="draggable"></div>
<div style="top:100px;left:200px;width:100px; height:100px; position:absolute; background-color:#ff6a00;" id="div7" class="draggable"></div>
<div style="top:200px;left:200px;width:100px; height:100px; position:absolute; background-color:#ff00dc;" id="div8" class="draggable"></div>
</form>
<script>

var iX = 0, iY = 0, startX = 0, startY = 0;
var divArr = new Array("div0", "div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8");
$(".draggable").draggable({
start: function () {
var a = $(this);
startX = a.position().left;
startY = a.position().top;
},
stop: function () {
var a = $(this);
iX = a.position().left - startX;
iY = a.position().top - startY;
$(divArr).each(function (i) {
if (divArr[i].toLowerCase() != a.attr("id").toLowerCase()) {
$("#" + divArr[i]).stop().animate({ "top": "+=" + iY, "left": "+=" + iX }, "slow");
}
});
}
});
</script>
</body>
</html>
AmirGhasemi
سه شنبه 04 تیر 1392, 11:55 صبح
آقا باور بفرما من مخلص شمام
يعني اگه عروسيت منو دعوت كني ميام مي رقصم
باور بفرما‌آبرومو حفظ كردي
دستت درد نكنه مخلص شمام
ب