<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
var dragobjekt2 = null;
// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
var dragx2 = 0;
var dragy2 = 0;
// Mausposition
var posx = 0;
var posy = 0;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
dragobjekt = element;
dragobjekt2 = document.className=="this2"; // <-- DRAGOBJEKT ist
//DOCUMENT namens this2
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
dragx2 = posx - dragobjekt2.offsetLeft;
dragy2 = posy - dragobjekt2.offsetTop;
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
dragobjekt=null;
dragobjekt2=null;
}
function drag(ereignis) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
dragobjekt2.style.left = (posx - dragx2) + "px";
dragobjekt2.style.top = (posy - dragy2) + "px";
}
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div class="this2" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
</body>
</html>
