Layer verschieben

[DK]

Hallo liebe Forengemeinde,

ich wollte mit Javascript einen Layer verschieben lassen.
Das sollte dann ähnlich sein wie das pageX/pageY Beispiel von selfhtml (http://de.selfhtml.org/javascript/objekte/anzeige/event_page_x_y.htm@title=http://de.selfhtml.org/javascript/objekte/anzeige/event_page_x_y.htm), nur dass der Layer nicht durch Klicken, sondern durch Ziehen verschoben wird.

Durch das mousedown-Event wird das Ziehen aktiviert, durch mousemove dann verschoben und durch mouseup dann wieder deaktiviert.

Beim ersten Mal funktioniert das auch problemlos. Doch sobald ich den Layer ein weiteres Mal verschieben will funktioniert das nicht mehr richtig. Der Layer wird transparent hinter der Maus hinterhergezogen, wie wenn man versucht ein Bild zu ziehen. Der Cursor wird dabei zu so einem Kreis diagonal von einer Linie durchzogen. Wenn ich zum Beispiel ein Bild irgendwo auf der Seite einbinde und anklicke kann ich den Layer danach wieder ein Mal problemlos ziehen.

Wie kann ich das Problem lösen?

Danke für Eure Hilfe
Gruß Dennis

[ChrisB]

Hi,

Wie kann ich das Problem lösen?

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[ChrisB]

Hi,

bitte unterlasse künftig Doppelpostings.
Der andere Thread ist zurecht geschlossen worden, deshalb antworte ich mal hier:

Durch das mousedown-Event wird das Ziehen aktiviert, durch mousemove dann verschoben und durch mouseup dann wieder deaktiviert.

Beim ersten Mal funktioniert das auch problemlos. Doch sobald ich den Layer ein weiteres Mal verschieben will funktioniert das nicht mehr richtig. Der Layer wird transparent hinter der Maus hinterhergezogen, wie wenn man versucht ein Bild zu ziehen. Der Cursor wird dabei zu so einem Kreis diagonal von einer Linie durchzogen.

Ja, da setzt offenbar das „normale“ Drag-Verhalten des Browsers ein.

layer['center'].onmousedown = function(e){ Dragging = true; X = e.pageX; Y = e.pageY; T = layer['center'].style.top; L = layer['center'].style.left; }

Ergänze mal hier am Ende der Funktion ein return false.
Nach meinem Test im FF beseitigt dies das Problem; es entsteht vermutlich dadurch, dass ohne der Event weiter „bubbled”, und dann nach dem Ziehen und Loslassen eben das normale Drag-Handling einsetzt.

MfG ChrisB

[ChrisB]

Hi,

ergänzend:

layer['center'].onmousedown = function(e){ Dragging = true; X = e.pageX; Y = e.pageY; T = layer['center'].style.top; L = layer['center'].style.left; }

Durch die Zuweisung an T und L holst du hier nur einmalig die aktuellen Werte ab.

Statt dann in DragLayer, wo diese Werte weiterhin unverändert bleiben, jedes mal parseInt anzuwenden, solltest du das lieber gleich in obiger Funktion machen.

MfG ChrisB

[DK]

Ergänze mal hier am Ende der Funktion ein return false.
Nach meinem Test im FF beseitigt dies das Problem; es entsteht vermutlich dadurch, dass ohne der Event weiter „bubbled”, und dann nach dem Ziehen und Loslassen eben das normale Drag-Handling einsetzt.

Vielen Dank. Hat geholfen.
Hab das schon gelesen und ausprobiert, allerding an der falschen Stelle eingesetzt.