nicht angemeldet
Warum funktioniert das Drag&drop nicht richtig?
Struppi
MudGuardHallo,
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>
-
für mein Verständnis verhält sich mein (folgendes) Script sehr merkwürdig.
Ja, beim onmousedown möchte der Browser etwas anderes machen, dass musst du unterbinden indem du return false zurückgibst, im Firefox ausserdem die Funktion event.preventDefault() aufrufen.
Es gibt übrigens tausende Drag & Drop Skripte im Internet. u.a auch 2 auf meiner Seite.
http://javascript.jstruebig.de/skripte/57/
http://javascript.jstruebig.de/javascript/67/Struppi.
-
Hi,
Hat jemand eine Idee, woran das liegt?
abgesehen von dem fehlenden "return false" musst Du auch noch den Unterschied zwischen Mousposition und Ecke oben-links ausgleichen. Habs mal leicht modifiziert angehängt, denn ich nehme mal an, Dir gehts auch um den Lerneffekt...
Gruesse, Joachim
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var diffx = 0;
var diffy = 0;
var posx = 0;
var posy = 0;function draginit() {
document.onmousemove = drag;
document.onmouseup = dragstop;
}function dragstart(e,element) {
diffx = e.layerX? e.layerX : e.offsetX;
diffy = e.layerY? e.layerY : e.offsetY;
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
return false;
}function dragstop() {
dragobjekt=null;
}function drag(ereignis) {
if(dragobjekt == null) return;
posx = (document.all? window.event.clientX : ereignis.pageX) -diffx;
posy = (document.all? window.event.clientY : ereignis.pageY) -diffy;
neuposx = (posx - dragx)*-1;
neuposy = (posy - dragy)*-1;
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
</script>
<style type="text/css">
#clipdiv {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body onLoad="draginit()">
<div onmousedown="dragstart(event,this)" id="clipdiv"></div>
</body>
</html>-
Hallo Joachim,
return false;
dieser kleine Übeltäter war die Ursache für mein Problem.
Der Rest funktioniert jetzt wie gewollt.Danke für die Hilfe.
-
dieser kleine Übeltäter war die Ursache für mein Problem.
Der Rest funktioniert jetzt wie gewollt.Tatsächlich?
So ist das gewollt?Struppi.
-
Hi,
Der Rest funktioniert jetzt wie gewollt.
nunja. Abgesehen davon, dass Du die eventuelle Scrollposition nicht berücksichtigst, solltest Du weiter die Vorgehensweise dahingehend ändern, dass Du nur den Unterschied zwischen den Mauspositionen berechnest, und diese Differenz dann zur aktuellen Element-Position addierst. Das erspart Dir die Berücksichtigung der Mausposition im Element.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
-
Hi,
style="position:absolute;top:200;left:200;
style="position:relative;top:-400;left:-400;"
Die Werte für top und left sind ungültig, müssen also von Browsern ignoriert werden.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.