js控制若干DIV位置前后移动(Jquery)
<!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>无标题文档</title>
</head>
<body>
<p>
<style type="text/css">
a {
TEXT-DECORATION: none;
COLOR: #000;}
a:link {
COLOR: #000000
}
a:visited {
COLOR: #000000
}
a:hover {
COLOR: #f60;
}
#down_pic div{position:relative; float:left;margin-right:10px;width:150px; height:100px; background-color:#0C0}
</style>
<script language="JavaScript" type="text/JavaScript" src="../../js/jquery.js"></script>
js控制若干DIV位置前后移动(Jquery)
<br />
</p>
<p>请提前调用jquery文件.</p>
<p>代码设计:<a href="http://www.hljqs.com">秋实网络</a> (<a href="http://www.hljqs.com">www.hljqs.com</a>)<br />
</p>
<form id="form1" name="form1" method="post" action="">
<textarea name="down" cols="74" id="down" >d1;d3;d2;d4;</textarea>
</form>
<br /><br />
<div style="display:inline;width:100%;" id="down_pic" >
<div id=d1 >
<a href="javascript:void(0)" onclick="move('d1','f');">头 </a>
<a href="javascript:void(0)" onclick="move('d1','p');">前 </a>
<a href="javascript:void(0)" onclick="move('d1','n');">后 </a>
<a href="javascript:void(0)" onclick="move('d1','l');">尾 </a>
d1
</div>
<div id=d3 >
<a href="javascript:void(0)" onclick="move('d3','f');">头 </a>
<a href="javascript:void(0)" onclick="move('d3','p');">前 </a>
<a href="javascript:void(0)" onclick="move('d3','n');">后 </a>
<a href="javascript:void(0)" onclick="move('d3','l');">尾 </a>
d3
</div>
<div id=d2 >
<a href="javascript:void(0)" onclick="move('d2','f');">头 </a>
<a href="javascript:void(0)" onclick="move('d2','p');">前 </a>
<a href="javascript:void(0)" onclick="move('d2','n');">后 </a>
<a href="javascript:void(0)" onclick="move('d2','l');">尾 </a>
d2
</div>
<div id=d4 >
<a href="javascript:void(0)" onclick="move('d4','f');">头 </a>
<a href="javascript:void(0)" onclick="move('d4','p');">前 </a>
<a href="javascript:void(0)" onclick="move('d4','n');">后 </a>
<a href="javascript:void(0)" onclick="move('d4','l');">尾 </a>
d4
</div>
</div>
<script>
//append() - 在被选元素的结尾插入内容
//prepend() - 在被选元素的开头插入内容
//after() - 在被选元素之后插入内容
//before() - 在被选元素之前插入内容
function move(div_id,move_p)
{
var div_str="<div id="+div_id+" >";
/*
div_str+="<a href=\"javascript:void(0)\" onclick=\"move('"+div_id+"','f');\">头 </a>";
div_str+="<a href=\"javascript:void(0)\" onclick=\"move('"+div_id+"','p');\">前 </a>";
div_str+="<a href=\"javascript:void(0)\" onclick=\"move('"+div_id+"','n');\">后 </a>";
div_str+="<a href=\"javascript:void(0)\" onclick=\"move('"+div_id+"','l');\">尾 </a>";
div_str+=" "+div_id;
*/
div_str+=$("#"+div_id).html();
div_str+="</div>";
var f_str,p_str,n_str,l_str;//头，前，后，尾
var down_str=document.getElementById("down").value;
var down_arry=down_str.split(";");
if (down_arry.length-1==1) return;//只有一张照片,退出
f_str=down_arry[0];l_str=down_arry[down_arry.length-2];//头，尾
for (i=0;i<down_arry.length-1 ;i++ )
{
//document.write(down_arry[i]+"<br/>"); //分割后的字符输出
if(down_arry[i]==div_id)
{
p_str=down_arry[i-1];n_str=down_arry[i+1];//前，后
if (move_p=="f")//头
{
down_str=down_str.replace(div_id+";","");
down_str= div_id+";"+down_str;
document.getElementById("down").value=down_str;
$("#"+div_id).remove();//移除原div
$("#down_pic").prepend(div_str);
}
else if (move_p=="p")//前
{
if (i==0) return;//要移动的图片以是第一个位置
down_str=down_str.replace(p_str+";"+div_id+";",div_id+";"+p_str+";");
document.getElementById("down").value=down_str;
$("#"+div_id).remove();//移除原div
$("#"+p_str).before(div_str);
}
else if (move_p=="n")//后
{
if (i==down_arry.length-2) return;//要移动的图片以是最后个位置
down_str=down_str.replace(div_id+";"+n_str+";",n_str+";"+div_id+";");
document.getElementById("down").value=down_str;
$("#"+div_id).remove();//移除原div
$("#"+n_str).after(div_str);
}
else if (move_p=="l")//尾
{
down_str=down_str.replace(div_id+";","");
down_str= down_str+div_id+";";
document.getElementById("down").value=down_str;
$("#"+div_id).remove();//移除原div
$("#down_pic").append(div_str);
}
break;//退出循环
}
}
/////////////////////////////////////////////////////////
//var div_str=" <div id=d4 style='position:relative; float:left;margin-right:10px;width:150px; height:100px; background-color:#F09'></div>";
//$("#down_pic").prepend(div_str);
//$("#down_pic").append(div_str);
//$("#d1").after(div_str);
}
function get(div_id)
{
var div_str=$("#"+div_id).html();
alert(div_str);
}
</script>
</body>
</html>