Måske kunne dette inspirere dig ?-)
<!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 4">
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
