<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 12px verdana, arial, sans-serif;
}
#categories {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<script type="text/javascript">
function catClick(event) {
var elmSrc = event.target||event.srcElement,
sSrc = elmSrc.getAttribute("src");
if (!sSrc||sSrc==="") return;
var elmPar = elmSrc.parentNode,
sId = elmPar.getAttribute("id");
(/_([a-z]+)\.png$/).test(sSrc);
switch (RegExp.$1) {
case "up":
if (elmPar.previousSibling) elmPar.parentNode.insertBefore(elmPar, elmPar.previousSibling);
break;
case "down":
if (elmPar.nextSibling.nextSibling) elmPar.parentNode.insertBefore(elmPar, elmPar.nextSibling.nextSibling);
break;
case "edit":
alert("Edit: "+sId);
break;
case "delete":
alert("Delete: "+sId);
break;
}
}
function saveOrder(elmForm) {
var a = [], aLI = elmForm.getElementsByTagName('li');
for (var i=0,j=aLI.length; i<j; i++) a[i] = aLI[i].getAttribute("id");
elmForm.showlist.value = a.join(",");
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="saveOrder(this)">
<input name="showlist" type="hidden">
<ul id="categories" onclick="catClick(event)">
<li id="item_1">Item #1<img src="icn_up.png"><img src="icn_down.png"><img src="icn_edit.png"><img src="icn_delete.png"></li><li
id="item_2">Item #2<img src="icn_up.png"><img src="icn_down.png"><img src="icn_edit.png"><img src="icn_delete.png"></li><li
id="item_3">Item #3<img src="icn_up.png"><img src="icn_down.png"><img src="icn_edit.png"><img src="icn_delete.png"></li><li
id="item_4">Item #4<img src="icn_up.png"><img src="icn_down.png"><img src="icn_edit.png"><img src="icn_delete.png"></li><li
id="item_5">Item #5<img src="icn_up.png"><img src="icn_down.png"><img src="icn_edit.png"><img src="icn_delete.png"></li>
</ul>
<p>
<button type="submit">Update</button>
</p>
</form>
</body>
</html>
Det kræver to nye ikoner: en pil op og en pil ned.
Bemærk den lidt sjove måde, jeg har skrevet LI elementerne på. For at holde DOM-koden simpel, må der ikke være white-space mellem LI elementerne. Da du formodentlig udskriver posterne dynamisk, burde dette ikke være et problem
