De momento te dejo esto, que me voi a dormir ya.
Funciona en todos los navegadores, salvo que hay que evitar que se seleccione el texto.
Código PHP:
<html>
<head>
<title>Pag1</title>
<style>
.elemento li{
position: absolute;
left:55px;
width:300px;
float:left;
clear:both;
cursor:move;
padding:2px;
border: 1px solid #ccc;
background-color: #eee;
}
</style>
</head>
<body>
<script LANGUAGE="JavaScript">
/* DRAG & DROP */
// Original: Randy Bennett ([email protected])
// Web Site: http://home.thezone.net/~rbennett/sitemap.htm
// (modificado)
N = (document.all) ? 0 : 1;
var ob;
document.onmousedown=function(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.style;
//X=event.offsetX;
Y=event.offsetY;
}
}
document.onmousemove=function(e) {
if (ob) {
if (N)
ob.moveTo((e.pageX-X), (e.pageY-Y));
else {
//ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
document.onmouseup=function() {
ob = null;
}
if (N)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
</script>
<ul class="elemento">
<li style="top:5px;">uno</li>
<li style="top:30px;">dos</li>
<li style="top:55px;">tres</li>
<li style="top:80px;">cuatro</li>
<li style="top:105px;">cinco</li>
<li style="top:130px;">seis</li>
</ul>
</body>
</html>
Ahora te toca mover ficha a ti
Entre todos poco a poco lo sacaremos, ya lo veras.
[Se podia haber copiado el script de esa pagina, pero si no no lo considero interesante, y ademas asi se simplifica]