bewegliche elemente

[Nick]

Hi
ich weiß zwar, dass es da schon dutzende Umsetzungen im Netz zu gibt, aber ich möchte nicht einfach irgendeinen Code kopieren und dann reinsetzen ohne ihn verstanden zu haben oder ihn selbst machen zu können.

Ich möchte ein div-element frei beweglich machen. Wenn man mit der Maus draufdrückt und gedrückt hält soll es der maus folgen, wenn man loslässt soll es stehen bleiben.

An sich ja leicht, ich wollte das alles mit onmousedown starten, und dann über onmouseup beenden. aber ich kriege es zum verrecken nicht zum laufen. habe es mit schleifen probiert, mit setIntervall und allem, aber es will einfach die funktion nicht rekursiv laufen lassen. entweder bewegt es sich dann nur einmal, wenn man draufdrückt, oder überhaupt gar nicht.

<div id="container" style="(...)" onmousedown="move('container')"></div>
<script type="text/javascript">
function move(id) {
   document.getElementById(id).style.top = window.event.pageY
   document.getElementById(id).style.left = window.event.pageX
   }
</script>

das ist mein grundgerüst.

ich hatte es schonmal mit:

function move(id) {
   var zaehler = 1
   do{
     document.getElementById(id).style.top = window.event.pageY
     document.getElementById(id).style.left = window.event.pageX
     if ( document.getElementById(id).onmouseup = true) {
       var zaehler = 2
       }
     } while (zaehler == 1)
   }

...probiert. aber das will nicht. wobei ich hier an der stelle auch nicht weiß ob "if ( document.getElementById(id).onmouseup = true)" überhaupt in der form anwendbar ist.

bin neu in javascript und hab im netz nach lösungen gesucht, bin aber bisher nicht fündig geworden.
deswegen wollte ich mal hier direkt bei euch nachfragen.

[jobo]

Hallo,

http://html-ag.wvs-berlin.de/Javascript/JS_Ziehen_Schieben/JS_Fenster_Ziehen_2.htm

Gruß

jobo

[Nick]

danke!
dann arbeite ich mich mal da durch.

aber nur mal kurz zu meinem code gefragt:
wie müsste ich denn abfragen ob onmouseup passiert ist oder nicht? oder gibt das tatsächlich den wert true/false zurück und ich mache es da nur in der instanz falsch?

und danke nochmal für den link

[Nick]

Habs mir angeguckt und wenn ich es richtig verstanden habe, dann leitet der bei seinem Script über onMouseDown eine Funktion ein, die quasi nur über eine weitere Funktion eine Weiterleitung durch onMouseMove einführt, oder?
Und in der gleichen Funktion steckt dann noch die Verzweigung über onMouseUp drin, die wenn dieser eintritt onMouseUp und onMouseMove gleich Null setzt.

das hatte ich aber auch schon vom prinzip her ausprobiert.
hab dann die Funktion start() erstellt, die über onMouseMove zu move() wechselt.
Hier:

<div id="container" onmousedown="start('container')"></div>

<script type="text/javascript">  
function start(id) {  
	document.getElementById(id).onemousemove=move(id)  
	}  
function move(id) {  
	document.getElementById(id).style.top =window.event.pageY  
	document.getElementById(id).style.left =window.event.pageX  
	}  
</script>

da hatte ich dann nur nicht die Stopfunktion drin, die war mir aber zu dem Zeitpunkt noch egal, ich wollte das ja erst einmal überhaupt zum laufen bringen.

Was hakt denn da bei meinem Code?
Bei mir ignoriert der dann einfach das onMouseMove und bewegt den Kasten wieder nur einmal und zwar bei onMouseDown. Und sonst nicht.

Danke schon einmal im Vorraus

[Struppi]

document.getElementById(id).onemousemove=move(id)

so weist du keinen Eventhandler zu, sondern der Rückgabewert, des Aufrufes der Funktion move() wird dem Eventhandler zugewiesen. Und der ist undefiniert.

Wie Eventhandler definiert werden, steht in Jobo's Skript, wobei dies aber Mängel hat, da der Defaulthandler nicht unterdrückt wird, d.h. der Text wird markiert.

Struppi.

[Nick]

du meinst das?

"onmousedown=ziehen"

"ziehen=name_der_funktion() {"

denn an anderen Stellen im Netz wird es so gemacht, wie ich es in meinem Script verwendet habe. ich bin jetzt etwas verwirrt.
einen anderen unterschied als den da oben sehe ich jetzt nicht zu meiner Verfahrensweise.
ich hab auch gerade im Netz geschaut. da gibt es ein beispiel wo sowas über "onmousedown=name_der_funktion()" gemacht wird.

wie kann man denn den Defaulthandler unterdrücken?

sorry, wenn ich so kackendreist frage :-(

[Struppi]

du meinst das?

"onmousedown=ziehen"

"ziehen=name_der_funktion() {"

Ja.

denn an anderen Stellen im Netz wird es so gemacht, wie ich es in meinem Script verwendet habe. ich bin jetzt etwas verwirrt.

Nein wird es nicht.

ich hab auch gerade im Netz geschaut. da gibt es ein beispiel wo sowas über "onmousedown=name_der_funktion()" gemacht wird.

Nein wird es nicht, das steht höchstens im HTML Code, aber nicht wenn im JS Code ein Eventhandler zugewiesen wird.

wie kann man denn den Defaulthandler unterdrücken?

Mit return false und/oder Event.stopPropagation()

Struppi.

[MudGuard]

Hi,

document.getElementById(id).onemousemove=move(id)

daß es nur einmal bewegt wird, ist doch klar: lies doch nochmal, an welche Eigenschaft Du den Rückgabewert von move(id) zuweist: one mouse move ;-)
Oder geht es hier um die Bewegung einer Elektro-Maus (on E-Mouse move)?

document.getElementById(id).style.top =window.event.pageY

afaik gibt es window.event nur in IE.

Außerdem: window.event.pageY ist eine Zahl.
Eine Zahl ist kein gültiger Wert für die CSS-Eigenschaft top.

document.getElementById(id).style.left =window.event.pageX

selbiges.

cu,
Andreas

[Der Martin]

Hallo,

aber nur mal kurz zu meinem code gefragt:
wie müsste ich denn abfragen ob onmouseup passiert ist oder nicht?

für dein Vorhaben brauchst du drei Eventhandler: onmousedown wird aufgerufen, wenn eine Maustaste niedergedrückt wird, onmousemove andauernd immer wieder, wenn die Maus bewegt wird, und onmouseup wenn -tadaa!- die Maustaste losgelassen wird.

Das Prinzip ist also:

onmousedown setzt irgendeine Indikator-Variable und erledigt vielleicht noch weitere Initialisierungen, die fürs Verschieben eines Elements nötig sind (z.B. einen sichtbaren Rahmen einblenden oder das Element einfärben).

onmouseup setzt die Indikator-Variable zurück und macht ggf. auch die visuelle Hervorhebung wieder rückgängig.

onmousemove schließlich fragt die Mauskoordinaten ab und setzt die Koordinaten des zu verschiebenden Elements entsprechend - aber nur dann, wenn die erwähnte Indikator-Variable gesetzt ist.

oder gibt das tatsächlich den wert true/false zurück und ich mache es da nur in der instanz falsch?

Die Frage ist doch: Bei onmousedown weißt du noch, dass das eine Funktionsreferenz sein soll. Warum willst du dann onmouseup völlig anders verwenden? Und auf das Bewegen selbst gehst du gar nicht ein.

So long,
 Martin