En hel anden indgangsvinkel, hvor du med musen kan trække op og ned:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><HTML>
<HEAD>
<TITLE>Byt celler</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<META NAME="description" CONTENT="Jes' Turneringsmager - byt kampdage">
<META NAME="keywords" CONTENT="turnering,deltagere,kampe,kampdage">
<META NAME="robots" CONTENT="index,follow">
<META HTTP-EQUIV="Content-Language" CONTENT="da">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<STYLE TYPE="text/css">
.tdname{
border:red 1px solid;
}
.tdkampe{
border:red 1px solid;
}
.dkampe{
background:'url(../transparent.gif)' 400px 25px repeat;
position:relative;
height:25px;
width:400px;
display:block;
}
.fkampe{
position:absolute;
background-color:grey;
border:#7f7f7f 1px dotted;
height:25px;
width:400px;
display:block;
z-index:3;
}
.dname{
background:'url(../transparent.gif)' 100px 25px no-repeat;
position:relative;
height:25px;
width:100px;
display:block;
}
.tdmellemrum{
background:'url(../transparent.gif)';
position:relative;
height:8 px;
font-size:4px;
border:transparent 0px;
}
</STYLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var nede = false;
var x = y = 0;
var stTop = 0;
var stHeight = 0;
var numDivs = 0;
var flytDivs = new Array();
function traek(obj) {
if (nede) {
//alert(stTop+"\n"+stHeight+"\n"+event.clientY+"\n"+y+"\n"+""+"\n"+obj.lastElm);
//obj.style.left = event.clientX - x;
var newTop = event.clientY - y - 3;
//first can't move up, last can't move down
if((newTop<stTop&&obj.num==0)||(newTop>stTop&&obj.num==numDivs)){return false;
}else{
//movement only allowed until 60% then a swap occurs
if(0.6*stHeight>Math.abs(stTop-newTop)){
obj.style.top = newTop;
return false;
}else{
swapElms(obj,newTop)
}
}
}
}
function swapElms(obj,newTop){
//Swapping values and relations
var newNum = oldNum = obj.num;
if (newTop>stTop)newNum++;
else newNum--;
var swap = flytDivs[newNum];
var newPar = swap.par;
var newSib = swap.sib;
swap.par = obj.par;
swap.sib = obj.sib;
swap.num = obj.num;
obj.par = newPar;
obj.sib = newSib;
obj.num = newNum;
flytDivs[oldNum] = swap;
flytDivs[newNum] = obj;
swap.sib.innerHTML = obj.sib.innerHTML;
obj.sib.innerHTML = obj.innerHTML;
swap.style.top = getPos(swap.par).y;
stTop = getPos(obj.par).y;
obj.style.top = stTop;
alert('Poster byttet rundt!');
}
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function initMove(obj){
stTop=getPos(obj.par).y;
stHeight=obj.par.scrollHeight;
x=event.offsetX;
y=event.offsetY;
nede=true;
obj.innerHTML = obj.sib.innerHTML;
}
function initFlytDiv(){
var b = document.body;
for(i=0;document.getElementById("tdkampe"+i);i++){
//document.body.innerHTML+='<DIV CLASS="fkampe" ID="fkampe'+i+'" onMouseDown="initMove(flytDivs[this.num]);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>'
var d = document.getElementById("fkampe"+i);
var p = document.getElementById("tdkampe"+i);
d.style.top = getPos(p).y;
d.style.left = getPos(p).x;
d.par = p;
d.sib = document.getElementById("kampe"+i);
d.num = i;
flytDivs[i] = d;
numDivs = i;
}
}
</SCRIPT>
</HEAD>
<BODY ONRESIZE ONLOAD="initFlytDiv()">
<TABLE CELLPADDING="0" CELLSPACING="0" COLS="2" STYLE="border-collapse:collapse"><!-- STYLE="border:black 1px solid;border-collapse:collapse" -->
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato0"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe0" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe0"> 0</DIV></TD>
</TR>
<TR>
<TD CLASS="tdmellemrum" COLSPAN="2" onSelectStart="return false;"> </TD>
</TR>
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato1"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe1" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe1"> 1</DIV></TD>
</TR>
<TR>
<TD CLASS="tdmellemrum" COLSPAN="2" onSelectStart="return false;"> </TD>
</TR>
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato2"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe2" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe2"> 2</DIV></TD>
</TR>
<TR>
<TD CLASS="tdmellemrum" COLSPAN="2" onSelectStart="return false;"> </TD>
</TR>
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato3"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe3" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe3"> 3</DIV></TD>
</TR>
<TR>
<TD CLASS="tdmellemrum" COLSPAN="2" onSelectStart="return false;"> </TD>
</TR>
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato4"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe4" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe4"> 4</DIV></TD>
</TR>
<TR>
<TD CLASS="tdmellemrum" COLSPAN="2" onSelectStart="return false;"> </TD>
</TR>
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato5"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe5" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe5"> 5</DIV></TD>
</TR>
<TR>
<TD CLASS="tdmellemrum" COLSPAN="2" onSelectStart="return false;"> </TD>
</TR>
<TR>
<TD CLASS="tdname" onSelectStart="return false;"><DIV CLASS="dname" ID="dato6"> </DIV></TD>
<TD CLASS="tdkampe" ID="tdkampe6" onSelectStart="return false;"><DIV CLASS="dkampe" ID="kampe6"> 6</DIV></TD>
</TR>
</TABLE>
<DIV CLASS="fkampe" ID="fkampe0" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
<DIV CLASS="fkampe" ID="fkampe1" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
<DIV CLASS="fkampe" ID="fkampe2" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
<DIV CLASS="fkampe" ID="fkampe3" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
<DIV CLASS="fkampe" ID="fkampe4" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
<DIV CLASS="fkampe" ID="fkampe5" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
<DIV CLASS="fkampe" ID="fkampe6" onMouseDown="initMove(this);" onMouseUp="nede=false;" onMouseOut="nede=false;" onMouseMove="traek(this);" onSelectStart="return false;" ></DIV>
</BODY>
</HTML>
-- bemærk, at også jeg bruger innerHTML, hvilket gør, at du kan have hvadsomhelst i de tabelceller, som kan flyttes (tabeller, billeder m.m.m.)
hth
jes
