nicht angemeldet
Drag&Drop
Hallo,
Ich habe den untenstehenden Code geschrieben, welcher bezwecken soll, dass man wenn man den blauen Balken anklickt sich Blau-Rote-Ding entsprechend des Mauscursors verschieben soll. Drag & Drop eben.
Das funktioniert nun alles ganz gut (habe noch keine IE-kompatibilität reingesetzt und den Code auch nicht wirklich Strukturiert. Halt erstmal ein Test-Code) aber es gibt ein Problem:
Wenn ich das erste mal auf den blauen Balken klicke, bewegt sich nichts.
Erst ab dem Zweiten mal wo ich draufklicke bewegt sich die Box wie gewollt. Ich habe die Left- und Top-Werte überprüft - Die scheinen in Ordnung zu sein. Ich hab das mal mit Firebug überprüft. Das Zielobjekt (div2) hat keine anderen Style-Werte - was natürlich ein Problem ist. Aber ich habe keine Ahnung warum. Und ich verstehe erst recht nicht, warum es beim Zweiten mal dann aber funktioniert.
Hoffentlich findet ihr den Fehler,
Vielen Dank,
Jannis
Code: ~~~html
<style type="text/css">
.fly{
background-color:red;
z-index:10;
position:absolute;
top:0;
left:0;
width:200px;
height:100px;
}
</style>
Hallo, ich bin ein Text.<br>
Und ich bin auch ein Text!<br>Hallo, ich bin ein Text.<br>
Und ich bin auch ein Text!<br>Hallo, ich bin ein Text.<br>
Und ich bin auch ein Text!<br>Hallo, ich bin ein Text.<br>
Und ich bin auch ein Text!<br>
<div id="div1"></div>
<div class="fly" id="div2">
<div style="width:100%;height:20px;background-color:blue;" OnMouseDown="dragstart(this.parentNode,this.onmousedown.arguments[0])" id="msg1">
</div>
</div>
<script type="text/javascript">
function dragstart(elementx,args){
agx2=args.layerX
agx3=args.layerY
agx=elementx
x=document.getElementById("drag_over")
if(!x){document.getElementsByTagName('body')[0].innerHTML+="<div style=\"width:100%;height:100%;position:absolute;z-index:10000;top:0;left:0;opacity:.5;background-color:blue\" id=\"drag_over\"></div>"
x=document.getElementById("drag_over")
x.onmousemove=function(Ereignis){ // function dragMe
agx.style.left=Ereignis.layerX-agx2
agx.style.top=Ereignis.layerY-agx3
//document.getElementById("div1").innerHTML=agx.style.top
}
x.onmouseup=function(){this.style.display="none"}}else x.style.display="";
}
~~~~~~html
</script>
~~~
-
Hellihello
Schnellschuss: weil Javascript die Styleangaben nur "kennt", wenn sie vor Ort (im Element) angegeben werden. Beim zweiten Mal, sind sie von JS gesetzt und somit "bekannt".
ansonsten s.a. http://html-ag.wvs-berlin.de/Javascript/JS_Ziehen_Schieben/JS_Fenster_Ziehen_2.htm
Gruß,
frankx