PDA

View Full Version : Span list sorting



dave_c00
Feb 28th, 2007, 06:18 PM
Hi,

I am after a simple html/java script where the user can change the position of an item on a list. I need 3 buttons next to each item;

move up a position
move down a position
move to the top of the list

It needs to be a form as well so the users choice can be saved.

I have written a few simple scripts that put an item to the top of the list using a select at the top of the list but I am unable to make the 3 buttons work.

When searching for an answer to this problem I found a few posts but most of the example links are inactive now.

Can anyone help?

Thanks,

Dave

vwphillips
Feb 28th, 2007, 10:56 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--


// this function adds the buttons and onclickevents to the buttons
function zxcChangePos(zxcid){
var zxcp=document.getElementById(zxcid)
var zxclis=zxcFindClds(zxcp.getElementsByTagName('LI')[0])[1]; // function to find the first level li(s) of the OL/UL
var zxcMoveAry=['Top','Down','Up'];
for (var zxc0=0;zxc0<zxclis.length;zxc0++){
if (zxclis[zxc0].parentNode==zxcp){
for (var zxc0a=0;zxc0a<zxcMoveAry.length;zxc0a++){
var zxcbut=document.createElement('INPUT');
zxcbut.style.fontSize='12px';
zxcbut.style.width='42px';
zxcbut.type='button';
zxclis[zxc0].insertBefore(zxcbut,zxclis[zxc0].firstChild);
zxcbut.value=zxcMoveAry[zxc0a];
zxcbut.onclick=function(){ zxcMove(this); }
}
}
}
}

function zxcMove(zxcobj){
var zxcary=zxcFindClds(zxcobj); // function to finds the OL/UL and the first level li(s)
var zxcud=(zxcobj.value=='Up')?-1:(zxcobj.value=='Down')?1:0;
// if Top button pressed simply append the button parent node(li) to the top of the OL/UL
if (zxcud==0){
if (zxcary[1][0]!=zxcobj.parentNode){
zxcary[0].insertBefore(zxcobj.parentNode,zxcary[1][0]);
}
return;
}
// if a button other than Top pressed remove all lis
for (var zxc0=0;zxc0<zxcary[1].length;zxc0++){
zxcary[0].removeChild(zxcary[1][zxc0]);
}
// swap the button parent node(li) array location with the one above or below dependent on Up or Down button press
for (var zxc1=0;zxc1<zxcary[1].length;zxc1++){
if (zxcary[1][zxc1+zxcud]&&zxcary[1][zxc1]==zxcobj.parentNode){
var zxcsave=zxcary[1][zxc1];
zxcary[1][zxc1]=zxcary[1][zxc1+zxcud];
zxcary[1][zxc1+zxcud]=zxcsave;
break;
}
}
// appent the array lis back into the OL/UL
for (var zxc2=0;zxc2<zxcary[1].length;zxc2++){
zxcary[0].appendChild(zxcary[1][zxc2]);
}
}

// this function finds the OL/UL and the first level li(s) from any child of the OL/UL
function zxcFindClds(zxcobj){
while(zxcobj.parentNode){
if (zxcobj.tagName=='UL'||zxcobj.tagName=='OL'){ break; }
zxcobj=zxcobj.parentNode;
}
var zxclis=zxcobj.getElementsByTagName('LI');
var zxcary=[];
for (var zxc0=0;zxc0<zxclis.length;zxc0++){
if (zxclis[zxc0].parentNode==zxcobj){
zxcary.push(zxclis[zxc0]);
}
}
return [zxcobj,zxcary];
}

//-->
</script>

</head>

<body onload="zxcChangePos('Tst');" >
<ul id="Tst" >
<li>Item1
<li>Item2
<li>Item3
<ul >
<li>Item3-1
<li>Item3-2
</ul>
<li>Item4
</ul>
</body>

</html>