klaus: Warum funktioniert das Drag&drop nicht richtig?

Beitrag lesen

Hallo,

für mein Verständnis verhält sich mein (folgendes) Script sehr merkwürdig.

Um ein Drag&Drop zu starten muss ich (soweit noch richtig), die Maustaste drücken und die etwas Maus bewegen.
Dabei soll sich die Position einer Grafik verschieben.
Diese verschiebt sich allerdings nicht bei dieser Aktion.
Wenn ich aber die Maustaste loslasse, dann kann ich mit jeder Mausbewegung die Grafik steuern, solange, bis ich wieder die Maustaste drücke.

Hat jemand eine Idee, woran das liegt?

Hier das einfache Test-Script von mir:

<html>
<head>
<script type="text/javascript">
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;

function draginit() {
 document.onmousemove = drag;
 document.onmouseup = dragstop;
}

function dragstart(element) {
 dragobjekt = document.getElementById(element);
 dragx = posx - dragobjekt.offsetLeft;
 dragy = posy - dragobjekt.offsetTop;
}

function dragstop() {
 dragobjekt=null;
}

function drag(ereignis) {
 if(dragobjekt != null) {
  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  neuposx = (posx - dragx)*-1;
  neuposy = (posy - dragy)*-1;

dragobjekt.style.left = (posx - dragx) + "px";
  dragobjekt.style.top = (posy - dragy) + "px";
 }
}
</script>
</head>
<body onLoad="draginit()">
 <hr>
 <br/>
 <div onmousedown="dragstart('clipimage')" id="clipdiv" style="position:absolute;top:200;left:200;float: left; width: 200px; height: 200px; overflow: hidden; border: 1px solid black;""><img id="clipimage" style="position:relative;top:-400;left:-400;" src="natgeo60.jpg" width="1024" height="768" border="0" alt=""></div>
 <br/>
 <hr>
 Clipping Demo !!
</body>
</html>