<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Imitation 265 Move Up/down (move up, move down) support IE, ff</title>
<style type= "Text/css" >
/*<! [cdata[*/
ul{
width:400px
}
li{
border:1px solid Gray;
List-style:none
}
. txt{
padding:4px;
Background-color: #ffffff
}
/*]]>*/
</style>
<script language= "javascript" type= "Text/javascript" >
<! [CDATA
Window.onload=function () {
Gggroup (document.getElementById (' Test '), 5);
};
function Gggroup (ele,margin) {
margin=margin| | 0;
var bgcolors= ' #b3d580, #99c9b1, #b4a1d8, #f7c480, #d5d588, #eea2bb '. Split (', ');
var txtup= ' Move Up ↑ ', txtdown= ' down ↓ ';
var panels=children (ele);
for (Var i=0,h=0;i<panels.length;i++) {
var p=panels[i];
p.style.position= ' absolute ';
P.style.width= ' 100% ';
var b=document.createelement (' div ');
With (B.style) {
Fontsize= ' 12px ';
padding= ' 4px ';
Backgroundcolor=bgcolors[i%bgcolors.length];
Textalign= ' right ';
}
B.innerhtml= ' <span> ' +txtup+ ' </span><span> ' +txtdown+ ' </span> ';
B.firstchild.onclick=moveup;
b.firstchild.style.cursor= ' pointer ';
B.lastchild.onclick=movedown;
b.lastchild.style.cursor= ' pointer ';
P.insertbefore (B,p.firstchild);
p.style.top=h+ ' px ';
P.index=i;
H+=p.offsetheight+margin;
}
ele.style.height=h+ ' px ';
ele.style.position= ' relative ';
Check (0,i-1);
function Check () {
for (Var i=0;i<arguments.length;i++) {
var x=arguments[i];
var c=panels[x].firstchild.childnodes;
C[0].style.visibility=x==0? ' Hidden ': ' Visible ';
C[1].style.visibility=x==panels.length-1? ' Hidden ': ' Visible ';
Panels[x].index=x;
}
}
function MoveUp (evt) {
var p=evt?evt.target:event.srcelement;
P=p.parentnode.parentnode;
Swap (p,panels[p.index-1]);
}
function MoveDown (evt) {
var p=evt?evt.target:event.srcelement;
P=p.parentnode.parentnode;
Swap (p,panels[p.index+1]);
}
Function Swap (P1,P2) {
var n=10;
var intv=200;
var arr1,arr2;
var t1=parseint (p1.style.top), T2=parseint (p2.style.top);
var H1=p1.offsetheight+margin,h2=p2.offsetheight+margin;
Arr1=makearr (T1,T1<T2?H2:-H2);
Arr2=makearr (T2,T1<T2?-H1:H1);
for (var i=0;i<n;i++) (function () {
var j=i;
SetTimeout (function () {
p1.style.top=arr1[j]+ "px";
p2.style.top=arr2[j]+ "px";
if (j==n-1) {
PANELS[P1.INDEX]=P2;
PANELS[P2.INDEX]=P1;
Check (P1.index,p2.index);
}
}, (j+1) *intv/n);
})();
function Makearr (f,x) {
var ret=[];
for (Var i=0;i<n;i++)
Ret[i]=math.round (f+i*x/(N-1));
return ret;
}
}
function Children (e) {
var ret=[];
for (Var i=0,c=e.childnodes;i<c.length;i++)
if (c[i].nodetype==1)
Ret.push (C[i]);
return ret;
}
}
]]>
</script>
<body>
<ul id= "Test" >
<li> <div class= "txt" ><li> <div class= "TXT" >
displaying content 1 displaying content 1 displaying content 1 displaying content 1
</div></li>
<li>
<div class= "TXT" >
<i> at the beginning of the human nature of the good </i>
</div></li>
<li>
<div class= "TXT" >
Codefans.net<br/> My <br/>...<br/> Learning paradise!
</div></li>
</ul>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Imitation 265-layer move up and down, support IE, FF
