<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
<title>Drag-Drop-Test</title>
<style type="text/css" media="screen">
body,html {
margin:0;
padding:0;
font-family:Arial, sans-serif;
}
h1 {
margin:10px;
}
#dragdrop {
list-style-type:none;
margin:10px;
padding:0;
border:2px #000 solid;
}
#dragdrop li {
margin:0;
padding:0;
}
#dragdrop div.item {
display:block;
background:#eee;
margin:0;
padding:0.1em;
line-height:1em;
}
#dragdrop div.drop {
display:block;
margin:0;
padding:0.3em 0 0 0;
background:#ddd;
}
#dragdrop div.lastDrop {
display:block;
margin:0;
padding:0;
height:0.3em;
line-height:0.3em;
background:#ddd;
overflow:hidden;
}
</style>
<script type="text/javascript">
var dropactive=false;
var dropid=null;
var oldpos=null;
function startDrag(id,pos,sender) {
dropactive=true;
dropid=id;
oldpos=pos;
document.getElementsByTagName("body")[0].style.cursor="move";
}
function drop (pos,sender) {
if (dropactive && pos!=oldpos && pos!=oldpos+1) {
sender.style.background="#ddd";
document.getElementsByTagName("body")[0]
.style.cursor="default";
Check = confirm("Move id ("+dropid
+") from position ("+oldpos
+") before position ("+pos+")?");
if (Check) {
/* Hier neue Seite mit Parameter aufrufen! */
alert("doit");
}
stopDrag();
}
}
function dragOver (pos,sender) {
if (dropactive && pos!=oldpos && pos!=oldpos+1) {
sender.style.background="#000";
}
}
function dragOut (pos,sender) {
if (dropactive && pos!=oldpos && pos!=oldpos+1) {
sender.style.background="#ddd";
}
}
function stopDrag() {
dropactive=false;
dropid=null;
oldpos=null;
document.getElementsByTagName("body")[0]
.style.cursor="default";
}
document.onmouseup=stopDrag;
</script>
</head>
<body>
<h1>Edit the Menu</h1>
<ul id="dragdrop"><li>
<div class="drop"
onmouseout="javascript:dragOut(1,this);"
onmouseover="javascript:dragOver(1,this);"
onmouseup="javascript:drop(1,this);"><div
id="item1"
class="item"
onmousedown="javascript:startDrag(1,1,this);">Item
1</div></div></li>
<li><div class="drop"
onmouseout="javascript:dragOut(2,this);"
onmouseover="javascript:dragOver(2,this);"
onmouseup="javascript:drop(2,this);"><div
id="item2"
class="item"
onmousedown="javascript:startDrag(2,2,this);">Item
2</div></div></li>
<li><div class="drop"
onmouseout="javascript:dragOut(3,this);"
onmouseover="javascript:dragOver(3,this);"
onmouseup="javascript:drop(3,this);"><div
id="item3"
class="item"
onmousedown="javascript:startDrag(3,3,this);">Item
3</div></div></li>
<li><div class="drop"
onmouseout="javascript:dragOut(4,this);"
onmouseover="javascript:dragOver(4,this);"
onmouseup="javascript:drop(4,this);"><div
id="item4"
class="item"
onmousedown="javascript:startDrag(4,4,this);">Item
4</div></div><div
class="lastDrop"
onmouseout="javascript:dragOut(5,this);"
onmouseover="javascript:dragOver(5,this);"
onmouseup="javascript:drop(5,this);"></div></li>
</ul>
</body>
</html>
