Below is the code which will move a DIV up and down inside many Divs and upwards and downward many DIvs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.div {
width:400px; height:200px; border:#036 1px solid; padding:5px; margin:5px;
}
.divmove {
width:100px; height:20px; border:#036 1px solid; padding:5px; margin:5px;
}
.moveme {
width:100px; height:20px; border:#036 1px solid; padding:5px; margin:5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#up").click(function() {
//alert('move');
//$("#div4").append($("#moveme"));
//$("#divmove").remove();
//$("#moveme").detach().appendTo('#div4');
//if($("#moveme").prev().attr('id') != 'stopup') {
var prevdiv = $("#moveme").prev().attr('id');
//}
if($("#moveme").prev().attr('id') == 'stopup') {
prevdiv='stopup';
}
//alert(prevdiv);
if(prevdiv == 'div4') {
// if the previuos div is the last div which has id div4 then it will go inside it.
$("#moveme").detach().appendTo('#div4');
$("#stopdown").before($("#moveme"));
}
else {
if(prevdiv != undefined && prevdiv != 'stopup') {
// if the previuos div is not undefined and not the top most div which has id stopup then it will keep movinf upward
$("#"+prevdiv).before($("#moveme"));
$("#divmove").remove();
}
if(prevdiv == undefined) {
//alert('Goto Div 1');
$("#moveme").detach().appendTo('#div2');
//$("#godiv1").after($("#moveme"));
}
if(prevdiv == 'godiv1') {
$("#moveme").detach().appendTo('#div1');
$("#godiv2").before($("#moveme"));
}
if(prevdiv == 'stopup') {
// if the previuos div is the top most dive then it will stop going up.
//do nothing
prevdiv='stopup';
}
}
//$("#moveme").detach().prepend("#"+prevdiv);
//$("#moveme").parent('div').prepend('<div id="movemeadded"><a id="up" style="cursor:pointer;">up</a> <a style="cursor:pointer;" id="down">down</a></div>');
});
$("#down").click(function() {
var nextdiv = $("#moveme").next().attr('id');
//alert(nextdiv);
if(nextdiv != undefined && nextdiv != 'stopdown') {
// if the previuos div is not undefined and not the top most div which has id stopup then it will keep movinf upward
$("#"+nextdiv).after($("#moveme"));
$("#divmove").remove();
}
if(nextdiv == 'godiv2') {
$("#moveme").detach().appendTo('#div2');
$("#godiv1").after($("#moveme"));
}
if(nextdiv == undefined) {
$("#moveme").detach().appendTo('#div4');
$("#logobottom").before($("#moveme"));
}
});
})
</script>
</head>
<body>
<table align="center" width="100%" border="0">
<tr>
<td align="center"> </td>
<td align="center">
<div class="main">
<div class="div" id="div1" align="center">
<div id="stopup"></div>
<div id="logotop">DIV 1</div>
<div id="div11">div 1 - 1</div>
<div id="div12">div 1 - 2</div>
<div id="div13">div 1 - 3</div>
<div id="div14">div 1 - 4</div>
<div id="godiv2"></div>
</div>
<div class="div" id="div2" align="center">
<div id="godiv1"></div>
<div id="div20">DIV 2</div>
<div id="div21">div 2 - 1</div>
<div id="div22">div 2 - 2</div>
<div id="div23">div 2 - 3</div>
<div id="div24">div 2 - 4</div>
</div>
<div class="div" id="div3" align="center">DIV 3</div>
<div class="div" id="div4" align="center">
<div id="logobottom">DIV 4</div>
<div id="div41">div 4 - 1</div>
<div id="div42">div 4 - 2</div>
<div id="stopdown"></div>
</div>
<div class="moveme" id="moveme"><a id="up" style="cursor:pointer;">up</a> <a style="cursor:pointer;" id="down">down</a></div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.div {
width:400px; height:200px; border:#036 1px solid; padding:5px; margin:5px;
}
.divmove {
width:100px; height:20px; border:#036 1px solid; padding:5px; margin:5px;
}
.moveme {
width:100px; height:20px; border:#036 1px solid; padding:5px; margin:5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#up").click(function() {
//alert('move');
//$("#div4").append($("#moveme"));
//$("#divmove").remove();
//$("#moveme").detach().appendTo('#div4');
//if($("#moveme").prev().attr('id') != 'stopup') {
var prevdiv = $("#moveme").prev().attr('id');
//}
if($("#moveme").prev().attr('id') == 'stopup') {
prevdiv='stopup';
}
//alert(prevdiv);
if(prevdiv == 'div4') {
// if the previuos div is the last div which has id div4 then it will go inside it.
$("#moveme").detach().appendTo('#div4');
$("#stopdown").before($("#moveme"));
}
else {
if(prevdiv != undefined && prevdiv != 'stopup') {
// if the previuos div is not undefined and not the top most div which has id stopup then it will keep movinf upward
$("#"+prevdiv).before($("#moveme"));
$("#divmove").remove();
}
if(prevdiv == undefined) {
//alert('Goto Div 1');
$("#moveme").detach().appendTo('#div2');
//$("#godiv1").after($("#moveme"));
}
if(prevdiv == 'godiv1') {
$("#moveme").detach().appendTo('#div1');
$("#godiv2").before($("#moveme"));
}
if(prevdiv == 'stopup') {
// if the previuos div is the top most dive then it will stop going up.
//do nothing
prevdiv='stopup';
}
}
//$("#moveme").detach().prepend("#"+prevdiv);
//$("#moveme").parent('div').prepend('<div id="movemeadded"><a id="up" style="cursor:pointer;">up</a> <a style="cursor:pointer;" id="down">down</a></div>');
});
$("#down").click(function() {
var nextdiv = $("#moveme").next().attr('id');
//alert(nextdiv);
if(nextdiv != undefined && nextdiv != 'stopdown') {
// if the previuos div is not undefined and not the top most div which has id stopup then it will keep movinf upward
$("#"+nextdiv).after($("#moveme"));
$("#divmove").remove();
}
if(nextdiv == 'godiv2') {
$("#moveme").detach().appendTo('#div2');
$("#godiv1").after($("#moveme"));
}
if(nextdiv == undefined) {
$("#moveme").detach().appendTo('#div4');
$("#logobottom").before($("#moveme"));
}
});
})
</script>
</head>
<body>
<table align="center" width="100%" border="0">
<tr>
<td align="center"> </td>
<td align="center">
<div class="main">
<div class="div" id="div1" align="center">
<div id="stopup"></div>
<div id="logotop">DIV 1</div>
<div id="div11">div 1 - 1</div>
<div id="div12">div 1 - 2</div>
<div id="div13">div 1 - 3</div>
<div id="div14">div 1 - 4</div>
<div id="godiv2"></div>
</div>
<div class="div" id="div2" align="center">
<div id="godiv1"></div>
<div id="div20">DIV 2</div>
<div id="div21">div 2 - 1</div>
<div id="div22">div 2 - 2</div>
<div id="div23">div 2 - 3</div>
<div id="div24">div 2 - 4</div>
</div>
<div class="div" id="div3" align="center">DIV 3</div>
<div class="div" id="div4" align="center">
<div id="logobottom">DIV 4</div>
<div id="div41">div 4 - 1</div>
<div id="div42">div 4 - 2</div>
<div id="stopdown"></div>
</div>
<div class="moveme" id="moveme"><a id="up" style="cursor:pointer;">up</a> <a style="cursor:pointer;" id="down">down</a></div>
</div>
</td>
</tr>
</table>
</body>
</html>
