Mouse Position bei onmousedown und nach onmouseup

litterauspirna · 28.12.2010, 17:44

Hallo Leute,

ich habe da mal ne Frage. Wie ich die Mouseposition beim onmousedown ermitteln kann weis ich und habe ich auch schon. Wie kann ich dann aber die Mouseposition nach onmousemove und onmouseup ermitteln?

Mein code bisher.

Code:

<html>
<head>

<script type="text/javascript">

function mousePosition ( e ) {
        
    var x;
    var y;
        
    if ( e ) {
        e = e;
    } else {
        e = window.event;
    }
        
    if ( e.pageX && e.pageY ) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft );
        y = e.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop );
    }
    
    return {x:x,y:y};
}

var createNewElement = function ( e ) {
    
    var mousePos = mousePosition( e );
    var startPointX = mousePos.x;
    var startPointY = mousePos.y;
    
    //alert( startPointX + " / " + startPointY );
}

</script>

<style type="text/css">

html {
    height: 100%;
}

body {
    height: 100%;
}

</style>

</head>
<body onmousedown="createNewElement( event )">

</body>
</html>

Also die Mouseposition X und Y Koordinate beim onmousedown habe ich ja nun schon. Um an die Position beim onmouseup zu kommen muss erst einmal ein onmousemove erfolgen, aber ich habe grad keinen Ansatz wie ich das machen soll.

Danke für eure Hilfe Gruß Litter

ChrisB · 28.12.2010, 18:04

Zitat:

Um an die Position beim onmouseup zu kommen muss erst einmal ein onmousemove erfolgen, aber ich habe grad keinen Ansatz wie ich das machen soll.

Wie du was machen musst - dafür sorgen, dass der Event mousemove ausgelöst wird? Einfach die Maus ein Stückchen schieben ...

Sorry, aber ich versteh' die Frage nicht wirklich.

litterauspirna · 28.12.2010, 18:15

Mist ich dachte ich habe meine Frage verständlich gestellt. Dann versuche ich das noch mal.

Du siehst meine Funktionen die ich geschrieben habe. In der Funktion soll bei onmousedown die Mousepostition der X und Y Koordinate gespeichert werden. Den Event onmousedown löse ich im Body aus. So das klappt, das heißt StartX und StartY Koordinate habe ich.

Nun hängt es, ich weis nicht wo und wie ich den Event onmousemove und onmouseup in der Funktion createNewElement einsetzen und anwenden soll.

Am Ende will ich mir ausgeben lassen zum testen in einem alert die X und Y Koordinaten beim onmousedown und die X und Y Koordinaten beim onmouseup.

War das jetzt verständlicher? Mein Problem ist das ich nicht wirklich einen Ansatz habe und weiß wie ich die Events onmousemove und onmouseup in der Funktion anwenden kann und soll.

Gruß Daniel

ChrisB · 28.12.2010, 18:24

Jeder auftretende Event hat ein eigenes event-Objekt, und wird auch einzeln für sich behandelt.

Das Problem ist also(?), die Daten, die mit dem Auftreten eines Events (mousedown) erhobenen Daten bei der Verarbeitung eines weiteren Events noch zur Verfügung zu haben.

Nun, ganz simpel könntest dir die mousedown-Koordinaten einfach in globalen Variablen ablegen - dann hast du auch noch Zugriff darauf, wenn du einen anderen Event verarbeitest.

Ansonsten müsstest du dir erst mal überlegen, wie du eine Zuordnung zwischen mousedown- und mouseup-Event herstellen kannst.
Und das Verhalten untersuchen, wenn z.B. einer der beiden außerhalb des Dokuments/Fensters stattfindet - dann wird man vermutlich nicht mehr davon ausgehen können, dass mousedown und mouseup immer "paarweise" auftreten.

Chriz · 28.12.2010, 21:49

Willst du ein Drag&Drop programmieren?

litterauspirna · 29.12.2010, 10:06

Zitat:

Zitat von Chriz

Willst du ein Drag&Drop programmieren?

Ja will das als Übung machen, aber nicht mit JQuery, das kann ich nutzen wenn ich gewisse Grundliegende Sachen in Javascript geschnallt habe und ich tue mich damit leider noch etwas schwer.

rudygotya · 30.12.2010, 15:26

Dann solltest du deine Signatur anpassen:
"Ich bin Masochist, denn ich will ständig das Rad neu erfinden"

Mal ehrlich, das ist nix, was man "mal eben" zur Grundlagen-Übung kurz runterschreibt.

litterauspirna · 30.12.2010, 15:32

Zitat:

Zitat von rudygotya

Dann solltest du deine Signatur anpassen:
"Ich bin Masochist, denn ich will ständig das Rad neu erfinden"

Mal ehrlich, das ist nix, was man "mal eben" zur Grundlagen-Übung kurz runterschreibt.

Ich denke diesen Kommentar hättest du auch getrost stecken lassen können, was in meiner Signatur steht hat wohl nichts mit meiner Frage zu tun.

Ich will um Himmels willen kein Rad neu erfinden, weil ich kein Framework etc. schrieben will, ich will einfach nur besser verstehen was wie und wo und warum passiert. Nicht mehr steht mir im Sinn.

Ich weis das dies nicht wirklich zu den Grundlagen gehört, ich habe auch zur Übung schon einige andere Sachen geschrieben, aber ich dachte es wäre ein guter Weg es besser zu verstehen wenn man das mal selber schreibt.

Ich werde und will mich früher oder später so oder so mit JQuery auseinander setzen, aber was nützt mir denn JQuery wenn ich diverse Grundlagensachen nicht verstehe. Ok zugegebener Maßen muss ich nach deinem Beitrag feststellen das ich nicht wirklich weiß was denn so alles zu den Grundlagen von Javascript gehört.

rudygotya · 30.12.2010, 15:41

Wenn du schreibst, dass drag&drop eine Grundlagen-Übung ist, dann musst du auch mit Sarkasmus leben können

Das muss man auch nicht gleich persönlich nehmen.

Es muss auch nicht jQuery sein, gibt zum Glück viele gute Alternativen.
Wenn du der Meinung bist, du musst noch üben, würde ich dir empfehlen, dir mal folgende Themen anzuschauen:

Organisation von Javascript(en)
Prototypen und Prototyp-basierte Vererbung
pseudoclassical inheritance in javascript
Der Scope einer Anwendung /Kontextwechsel von this (insb. ecma 5 Function.bind())

Wenn du paar links brauchst/ nix findest, sag Bescheid.

Thalo · 30.12.2010, 18:04

Vielleicht hilft dir ja diese Seite weiter: http://aktuell.de.selfhtml.org/artik...t/draganddrop/

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Position der Makierung auslesen	Lollix	JavaScript, Ajax und mehr	1	19.12.2010 18:09
[Erledigt] Jquery - Position auf Bild abfragen	TZP	JavaScript, Ajax und mehr	3	08.10.2010 15:01
In PHP an einer bestimmten Position einer Datei schreiben.	el_vital	PHP Tipps 2010	4	06.06.2010 15:32
CSS: Style ohne position?	SilentSight	HTML, Usability und Barrierefreiheit	5	25.07.2008 16:12
Position einer zeile in einer sortierten tabelle bestimmen	Drache	Datenbanken	9	17.06.2007 10:45
Mauszeiger Position (ohne Event)	cowabunga1984	HTML, Usability und Barrierefreiheit	4	04.04.2007 12:01
Position eines Strings rausfinden, der mehrmals vorkommt		PHP Tipps 2006	5	12.02.2006 19:20
mit position nachruecken	imported_kremser	Datenbanken	2	08.02.2006 21:50
Position abfragen		Datenbanken	5	29.09.2005 16:31
position einer abfrage		Datenbanken	7	14.06.2005 20:48
Scrollbar Position auslesen und an Link übergeben...	Plague	PHP Tipps 2005	6	17.05.2005 16:40
Position in der Datenbank.		PHP-Fortgeschrittene	2	21.11.2004 16:10
Position relative oder absolute	Stümper	HTML, Usability und Barrierefreiheit	3	12.09.2004 11:56

28.12.2010, 17:44
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Mouse Position bei onmousedown und nach onmouseup Hallo Leute, ich habe da mal ne Frage. Wie ich die Mouseposition beim onmousedown ermitteln kann weis ich und habe ich auch schon. Wie kann ich dann aber die Mouseposition nach onmousemove und onmouseup ermitteln? Mein code bisher. Code: <html> <head> <script type="text/javascript"> function mousePosition ( e ) { var x; var y; if ( e ) { e = e; } else { e = window.event; } if ( e.pageX && e.pageY ) { x = e.pageX; y = e.pageY; } else { x = e.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft ); y = e.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop ); } return {x:x,y:y}; } var createNewElement = function ( e ) { var mousePos = mousePosition( e ); var startPointX = mousePos.x; var startPointY = mousePos.y; //alert( startPointX + " / " + startPointY ); } </script> <style type="text/css"> html { height: 100%; } body { height: 100%; } </style> </head> <body onmousedown="createNewElement( event )"> </body> </html> Also die Mouseposition X und Y Koordinate beim onmousedown habe ich ja nun schon. Um an die Position beim onmouseup zu kommen muss erst einmal ein onmousemove erfolgen, aber ich habe grad keinen Ansatz wie ich das machen soll. Danke für eure Hilfe Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.12.2010, 18:15
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Mist ich dachte ich habe meine Frage verständlich gestellt. Dann versuche ich das noch mal. Du siehst meine Funktionen die ich geschrieben habe. In der Funktion soll bei onmousedown die Mousepostition der X und Y Koordinate gespeichert werden. Den Event onmousedown löse ich im Body aus. So das klappt, das heißt StartX und StartY Koordinate habe ich. Nun hängt es, ich weis nicht wo und wie ich den Event onmousemove und onmouseup in der Funktion createNewElement einsetzen und anwenden soll. Am Ende will ich mir ausgeben lassen zum testen in einem alert die X und Y Koordinaten beim onmousedown und die X und Y Koordinaten beim onmouseup. War das jetzt verständlicher? Mein Problem ist das ich nicht wirklich einen Ansatz habe und weiß wie ich die Events onmousemove und onmouseup in der Funktion anwenden kann und soll. Gruß Daniel __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

28.12.2010, 18:24
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Jeder auftretende Event hat ein eigenes event-Objekt, und wird auch einzeln für sich behandelt. Das Problem ist also(?), die Daten, die mit dem Auftreten eines Events (mousedown) erhobenen Daten bei der Verarbeitung eines weiteren Events noch zur Verfügung zu haben. Nun, ganz simpel könntest dir die mousedown-Koordinaten einfach in globalen Variablen ablegen - dann hast du auch noch Zugriff darauf, wenn du einen anderen Event verarbeitest. Ansonsten müsstest du dir erst mal überlegen, wie du eine Zuordnung zwischen mousedown- und mouseup-Event herstellen kannst. Und das Verhalten untersuchen, wenn z.B. einer der beiden außerhalb des Dokuments/Fensters stattfindet - dann wird man vermutlich nicht mehr davon ausgehen können, dass mousedown und mouseup immer "paarweise" auftreten. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

28.12.2010, 21:49
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Willst du ein Drag&Drop programmieren? __________________ "Nuschel ich?" - "Was?"

30.12.2010, 15:26
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Dann solltest du deine Signatur anpassen: "Ich bin Masochist, denn ich will ständig das Rad neu erfinden" Mal ehrlich, das ist nix, was man "mal eben" zur Grundlagen-Übung kurz runterschreibt. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

30.12.2010, 15:41
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Wenn du schreibst, dass drag&drop eine Grundlagen-Übung ist, dann musst du auch mit Sarkasmus leben können Das muss man auch nicht gleich persönlich nehmen. Es muss auch nicht jQuery sein, gibt zum Glück viele gute Alternativen. Wenn du der Meinung bist, du musst noch üben, würde ich dir empfehlen, dir mal folgende Themen anzuschauen: Organisation von Javascript(en) Prototypen und Prototyp-basierte Vererbung pseudoclassical inheritance in javascript Der Scope einer Anwendung /Kontextwechsel von this (insb. ecma 5 Function.bind()) Wenn du paar links brauchst/ nix findest, sag Bescheid. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

30.12.2010, 18:04
Thalo Benutzer Registriert seit: 03.07.2009 Beiträge: 58 PHP-Kenntnisse: Fortgeschritten	Vielleicht hilft dir ja diese Seite weiter: http://aktuell.de.selfhtml.org/artik...t/draganddrop/