Så kommer der ikke flere færdige løsninger iaften :)
<script type="text/JavaScript">
var d=document;
function gE(id){return d.getElementById(id)}
function gA(o,tag){return o.getElementsByTagName(tag)}
function mySave() {
var inpts, divs = gA(gE("cont"), "DIV");
for ( i=0; i<divs.length; i++ ) {
inpts = gA(divs[i], "INPUT");
for ( j=0; j<inpts.length; j++ ) {
if (inpts[j].className=="showInxInp") {
inpts[j].value = i;
break;
}
}
}
}
function findParObj(elm, tag) {
for (i=0; elm.tagName!=tag; elm = elm.parentNode);
return elm;
}
function myMove(elm, dir) {
var newElm, aDivs, f, cont=gE("cont");
f = elm.form;
elm = findParObj(elm, "DIV");
newElm = elm.cloneNode(true);
aDivs = gA(cont, "DIV");
inp = f.elements[ "x"+elm.id.split("ID")[1] ];
if (dir=="up") {
for ( i=1; i<aDivs.length; i++ ) {
if ( aDivs[i]==elm ) {
cont.removeChild(elm);
cont.insertBefore(newElm, gA(cont, "DIV")[i-1]);
}
}
}
else if (dir=="down") {
for ( i=1; i<aDivs.length; i++ ) {
if ( aDivs[i-1]==elm ) {
cont.removeChild(elm);
if (aDivs.length>i) cont.insertBefore(newElm, gA(cont, "DIV")[i]);
else cont.appendChild(newElm);
break;
}
}
}
else if (dir=="out") {
inp.setAttribute("value", parseInt(inp.value) + 1 );
elm.style.left = ( parseInt(inp.value)*30 ) + "px";
}
else if (dir=="in") {
if ( inp.value<1 ) return;
inp.setAttribute("value", parseInt(inp.value) - 1 );
elm.style.left = ( parseInt(inp.value)*30 ) + "px";
}
if (navigator.userAgent.toLowerCase().indexOf("opera")==-1) cont.innerHTML = cont.innerHTML + ""
}
</script>
<style type="text/css">
* {
font: 11px 'ms sans serif', tahoma;
}
#cont div {
position: relative;
padding: 5px 10px;
margin: 3px;
background-color: #6699ff;
border: 1px solid #003399;
width: 300px;
}
#cont div input {
width: 30px;
}
</style>
<form>
<div id="cont">
<div id="ID_0"><span><input type="text" name="y_0" class="showInxInp"><input type="text" value="0" name="x_0" class="showX"> Nummer 0 </span><span><button onclick="myMove(this, 'up');return false">Up</button><button onclick="myMove(this, 'down');return false">Down</button><button onclick="myMove(this, 'in');return false">IN</button><button onclick="myMove(this, 'out');return false">OUT</button></span></div>
<div id="ID_1"><span><input type="text" name="y_1" class="showInxInp"><input type="text" value="0" name="x_1" class="showX"> Nummer 1 </span><span><button onclick="myMove(this, 'up');return false">Up</button><button onclick="myMove(this, 'down');return false">Down</button><button onclick="myMove(this, 'in');return false">IN</button><button onclick="myMove(this, 'out');return false">OUT</button></span></div>
<div id="ID_2"><span><input type="text" name="y_2" class="showInxInp"><input type="text" value="0" name="x_2" class="showX"> Nummer 2 </span><span><button onclick="myMove(this, 'up');return false">Up</button><button onclick="myMove(this, 'down');return false">Down</button><button onclick="myMove(this, 'in');return false">IN</button><button onclick="myMove(this, 'out');return false">OUT</button></span></div>
<div id="ID_3"><span><input type="text" name="y_3" class="showInxInp"><input type="text" value="0" name="x_3" class="showX"> Nummer 3 </span><span><button onclick="myMove(this, 'up');return false">Up</button><button onclick="myMove(this, 'down');return false">Down</button><button onclick="myMove(this, 'in');return false">IN</button><button onclick="myMove(this, 'out');return false">OUT</button></span></div>
<div id="ID_4"><span><input type="text" name="y_4" class="showInxInp"><input type="text" value="0" name="x_4" class="showX"> Nummer 4 </span><span><button onclick="myMove(this, 'up');return false">Up</button><button onclick="myMove(this, 'down');return false">Down</button><button onclick="myMove(this, 'in');return false">IN</button><button onclick="myMove(this, 'out');return false">OUT</button></span></div>
</div>
<button onclick="mySave();return false">Save</button>
</form>
