Mausposition ab dem aktuellen target / element ermitteln

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mausposition ab dem aktuellen target / element ermitteln

    Hallo Leute,

    ich mache nun immer wieder was mit Javascript und habe auch einige Fortschritte gemacht. Nun habe ich einen Slider fast fertig programmiert und habe nun ein Problem.

    Wie ich die Mausposition ab dem Bildschirmrand bekomme weis ich.

    Code:
    var eventValues = function(pEvent) {
    	pEvent = pEvent || window.event;
    	var target = pEvent.target || pEvent.srcElement;
    	
    	var xE = null;
    	var yE = null;
    	
    	if(pEvent.pageX && pEvent.pageY) {
    		xE = pEvent.pageX;
    		yE = pEvent.pageY;
    	} else {
    		xE = pEvent.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft );
    		yE = pEvent.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop );
    	}
    	
    	var conf = {
    		'pM' : {
    			'x' : xE,
    			'y' : yE
    		},
    		'pE' : {
    			'x' : target.offsetLeft,
    			'y' : target.offsetTop
    		},
    		'sE' : {
    			'w' : target.offsetWidth,
    			'h' : target.offsetTop
    		}
    	}
    	
    	return conf;
    }
    Das klappt auch.

    Aber nun habe ich einén DIV Container auf dem ich mich mit der Maus befinde.
    Und nun brauche ich die Mausposition von dem Element aus gesehen und nicht vom Bildschirmrand.
    Wie kann ich das erreichen?

    Danke für eure Hilfe mfg der 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

  • #2
    Hi,

    jedes Element hat die Eigenschaften offsetLeft und offsetTop, die den Abstand der linken oberen Ecke des Elements zu derselben Ecke des offsetParent-Elements wiedergeben. Dieses offsetParent ist eine weitere Eigenschaft jedes Elements und darüber musst du dich durchhangeln, in etwa so:

    HTML-Code:
    var element = …; // das gesuchte div
    var x = 0;
    var y = 0;
    for (var current = element; current; current = current.offsetParent) {
        x += current.offsetLeft;
        y += current.offsetTop;
    }
    Am Ende der Schleife hast du also jetzt die Elementposition vom Bildschirmrand. Die kannst du jetzt mit der Mausposition verrechnen und bekommst die Mausposition relativ zur linken oberen Ecke des Elements.

    Gruß,

    Amica
    Zuletzt geändert von AmicaNoctis; 11.10.2011, 19:35.
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Mit current meinst du das aktuelle Element in dem ich mich befinde? Also das target? Oder verstehe ich das falsch? Wenn ich in einem DIV bin mit der Maus dann ist das ja das aktuelle Element also das current.
      Und das altuelle Element in dem oder auf dem ich mich befinde kann ich über target.getAttribute('id'); normalerweise ansprechen.
      Oder liege ich grad vollkommen daneben?
      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

      Kommentar


      • #4
        current ist nur eine Schleifenvariable. Du kannst die auch gerne i nennen. Die Variable element stellt das gesuchte div dar. Ich hatte das im Beitrag auch inzwischen etwas klarer gemacht, vielleicht hast du die Änderungen noch nicht gesehen.
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          Zitat von AmicaNoctis Beitrag anzeigen
          current ist nur eine Schleifenvariable. Du kannst die auch gerne i nennen. Die Variable element stellt das gesuchte div dar. Ich hatte das im Beitrag auch inzwischen etwas klarer gemacht, vielleicht hast du die Änderungen noch nicht gesehen.
          Stimmt die habe ich noch nicht gesehen gehabt, jetzt ist mir das schon klarer.
          Danke erst mal, ich werde das probieren und da hoffentlich ne Erfplgsmeldung machen können.
          Einen schönen Abend dir noch und schöne Grüße.
          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

          Kommentar


          • #6
            Zitat von litterauspirna Beitrag anzeigen
            Einen schönen Abend dir noch und schöne Grüße.
            Gleichfalls, auch schöne Grüße an die große und die kleine Püppi.
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar


            • #7
              Ich bekomme einfach keine korrekte Berechnung für ein einfaches Drag and Drop in den Gang.

              Ich habe folgende Javascripte.

              Code:
              var mouseData = function(pEvent)
              {
              	/**
              	 * Event auf Browser optimieren
              	 */
              	pEvent = pEvent || window.event;
              	var target = pEvent.target || pEvent.srcElement;
              	
              	var xE = null;
              	var yE = null;
              	
              	if(pEvent.pageX && pEvent.pageY) {
              		xE = pEvent.pageX;
              		yE = pEvent.pageY;
              	} else {
              		xE = pEvent.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft );;
              		yE = pEvent.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop );;
              	}
              	
              	/**
              	 * Konfigurationsobjekt für Element und Eventwerte
              	 */
              	var conf = {
              		'pM' : {
              			'x' : xE,
              			'y' : yE
              		},
              		'pE' : {
              			'x' : target.offsetLeft,
              			'y' : target.offsetTop
              		},
              		'sE' : {
              			'w' : target.offsetWidth,
              			'h' : target.offsetTop
              		},
              		'tE' : {
              			'e' : pEvent || window.event,
              			't' : pEvent.target || pEvent.srcElement
              		}
              	}
              	
              	return conf;
              }
              Code:
              var move = false;
              
              var downActive = function(pEvent)
              {
              	var ev = mouseData(pEvent);
              	move = true;
              }
              
              var downReset = function(pEvent)
              {
              	var ev = mouseData(pEvent);
              	move = false;
              }
              
              
              var moveElement = function(pEvent)
              {
                  var ev = mouseData(pEvent);
                  var target = ev.tE.t;
                  var posX = (ev.pM.x - ev.pE.x);
                  var current = (ev.pM.x - posX);
                  
                  //if(move == true) {
              	    document.getElementById('jstest').style.position = 'absolute';
              	    document.getElementById('jstest').style.left = current + 'px';
              	    document.getElementById('cntrl').lastChild.nodeValue = current;
                  //}
              }
              CSS Datei.
              Code:
              .test
              {
                  width: 120px;
                  height: 70px;
                  border: 1px solid #000;
                  position: relative;
              }
              
              div#jstest
              {
                  position: absolute;
                  width: 30px;
                  height: 20px;
                  border: 1px solid #000;
              }
              Und Html Aufbau.
              Code:
              <div>
                  <ul>
                      <li>
                          <?php echo $this->test; ?>
                      </li>
                      <li id="cntrl">
                          
                      </li>
                  </ul>
                  <div id="test" class="test">
                      <div id="jstest"></div>
                  </div>
              </div>
              Der div mit der id jstest soll verschoben wwerden können innerhalb des Containers mti der id test.
              Der Wert posX ist 0 weil der parent Container relativ positioniert ist und der Child Container absolut.
              Wie kann ich es erreichen ein korrektes Drag and Drop umzusetzen.
              Bzw. was bracuhe ich an Werten für die richtige Berechnung?

              Danke für hilfreiche Antworten. 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

              Kommentar


              • #8
                Irgendwie habe ich nen absoluten Denkknoten im Kopf.

                Ich habe es noch mal selber versucht.
                Hier könnt ihr das Beispiel sehen

                Mir fehlt der letzte richtige Schritt für die richtige Positionsberechnung damit das Drag and Drop richtig funktioniert.

                Hier noch mal die Codes dazu, das Html und CSS könnt ihr euch ja über strg U im Firefox anscheuen, so muss das nicht unnötig Platz wegnehmen, ich hoffe das ist ok so.

                Config.
                Code:
                var eventValues = function(pEvent) {
                	pEvent = pEvent || window.event;
                	var target = pEvent.target || pEvent.srcElement;
                	
                	var xE = null;
                	var yE = null;
                	
                	if(pEvent.pageX && pEvent.pageY) {
                		xE = pEvent.pageX;
                		yE = pEvent.pageY;
                	} else {
                		xE = pEvent.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft );
                		yE = pEvent.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop );
                	}
                	
                	var conf = {
                		'pM' : {
                			'x' : xE,
                			'y' : yE
                		},
                		'pE' : {
                			'x' : target.offsetLeft,
                			'y' : target.offsetTop
                		},
                		'sE' : {
                			'w' : target.offsetWidth,
                			'h' : target.offsetTop
                		},
                		'eT' : {
                			'e' : pEvent = pEvent || window.event,
                			't' : target = pEvent.target || pEvent.srcElement
                		}
                	};
                	
                	return conf;
                }
                Und meine Movetest Datei.
                Code:
                var down = false;
                
                var downElem = function(pEvent)
                {
                	var ev = eventValues(pEvent);
                	down = true;
                }
                
                var upElem = function(pEvent)
                {
                	var ev = eventValues(pEvent);
                	down = false;
                }
                
                var moveElem = function(pEvent)
                {
                	if(down == true) {
                		var ev = eventValues(pEvent);
                		var target = ev.eT.t;
                		var offLeft = 0;
                		var newMx = 0;
                		var dragStart = 0;
                		var movePos = 0;
                		var idElem = target.getAttribute('id');
                		
                		for(var current = target; current; current = current.offsetParent) {
                			offLeft += current.offsetLeft;
                		}
                		//neue mausposition
                		newMx = ev.pM.x - offLeft;
                		//ausgangsposition vorm bewegen
                		dragStart = newMx - ev.pE.x;
                		//position beim bewegen
                		movePos = (newMx - dragStart);
                		//wert für das bewegen übergeben
                		document.getElementById(idElem).style.position = "absolute";
                		document.getElementById(idElem).style.left = movePos + 'px';
                		
                		document.getElementById('cntrl').lastChild.nodeValue = dragStart;
                	}
                };
                
                function loadFuncs(pEvent)
                {
                	if(document.addEventListener) {
                		document.getElementById('regulator').addEventListener('mousedown', downElem, false); 
                		document.getElementById('regulator').addEventListener('mousemove', moveElem, false); 
                		document.getElementById('regulator').addEventListener('mouseup', upElem, false); 
                	} else {
                		document.getElementById('regulator').attachEvent('onmousemove', moveElem);
                	}
                };
                Ich danke euch für jede Hilfe. Gruß der 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

                Kommentar


                • #9
                  Hallo nochmal,

                  ich hab es mir zwar noch nicht genauer angesehen, aber was mir auf den ersten Blick ins Auge fiel, war, dass du in dem conf-Objekt in conf.sE.h offsetTop statt offsetHeight geschrieben hast. Das kann natürlich schon einen großen Teil des Fehlers ausmachen. Davon abgesehen sind diese Member (z. B. sE) nicht unbedingt selbsterklärend. Mit x, y, w und h kann man noch was anfangen, aber die erste Ebene ist irgendwie kryptisch.

                  Gruß,

                  Amica
                  Zuletzt geändert von AmicaNoctis; 14.10.2011, 01:35.
                  [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                  Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                  Super, danke!
                  [/COLOR]

                  Kommentar


                  • #10
                    Also langsam bin ich mit meinem Latein am Ende. Ich weiß nicht mal mehr wo mein Denkhänger stattfindet.

                    An dem falsch zugewiesenen Wert im Config Objekt lag es nicht.
                    HAbe die Variablennamen auch umbenannt.

                    Code:
                    var eventValues = function(pEvent) {
                    	pEvent = pEvent || window.event;
                    	var target = pEvent.target || pEvent.srcElement;
                    	
                    	var xE = null;
                    	var yE = null;
                    	
                    	if(pEvent.pageX && pEvent.pageY) {
                    		xE = pEvent.pageX;
                    		yE = pEvent.pageY;
                    	} else {
                    		xE = pEvent.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft );
                    		yE = pEvent.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop );
                    	}
                    	
                    	var conf = {
                    		'mouse' : {
                    			'x' : xE,
                    			'y' : yE
                    		},
                    		'elem' : {
                    			'x' : target.offsetLeft,
                    			'y' : target.offsetTop
                    		},
                    		'elemSize' : {
                    			'w' : target.offsetWidth,
                    			'h' : target.offsetHeight
                    		},
                    		'currentElem' : {
                    			'e' : pEvent = pEvent || window.event,
                    			't' : target = pEvent.target || pEvent.srcElement
                    		}
                    	};
                    	
                    	return conf;
                    }
                    Code:
                    var down = false;
                    
                    var downElem = function(pEvent)
                    {
                    	var ev = eventValues(pEvent);
                    	down = true;
                    }
                    
                    var upElem = function(pEvent)
                    {
                    	var ev = eventValues(pEvent);
                    	down = false;
                    }
                    
                    var moveElem = function(pEvent)
                    {
                    	if(down == true) {
                    		var ev = eventValues(pEvent);
                    		var target = ev.currentElem.t;
                    		var offLeft = 0;
                    		var newMx = 0;
                    		var dragStart = 0;
                    		var movePos = 0;
                    		var idElem = target.getAttribute('id');
                    		
                    		for(var current = target; current; current = current.offsetParent) {
                    			offLeft += current.offsetLeft;
                    		}
                    		//neue mausposition
                    		newMx = ev.mouse.x - offLeft;
                    		//ausgangsposition vorm bewegen
                    		dragStart = newMx - ev.elem.x;
                    		//position beim bewegen
                    		movePos = (newMx - dragStart);
                    		//wert für das bewegen übergeben
                    		document.getElementById(idElem).style.position = "absolute";
                    		document.getElementById(idElem).style.left = movePos + 'px';
                    		
                    		document.getElementById('cntrl').lastChild.nodeValue = newMx + ' - ' + ev.elem.x;
                    	}
                    };
                    
                    function loadFuncs(pEvent)
                    {
                    	if(document.addEventListener) {
                    		document.getElementById('regulator').addEventListener('mousedown', downElem, false); 
                    		document.getElementById('regulator').addEventListener('mousemove', moveElem, false); 
                    		document.getElementById('regulator').addEventListener('mouseup', upElem, false); 
                    	} else {
                    		document.getElementById('regulator').attachEvent('onmousemove', moveElem);
                    	}
                    };
                    Das kleine schwarze Element lässt sich nur nach rechts verschieben und immer um den Wert 5.

                    Wenn noch jemand ne zündende Idee hat wäre ich sehr dankbar.

                    Das Beispile immer noch

                    Gruß der 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

                    Kommentar


                    • #11
                      Du speicherst die Startposition nicht beim Drag, sondern rechnest sie bei jeder Bewegung neu aus.

                      Code:
                      		dragStart = newMx - ev.pE.x;
                      		//position beim bewegen
                      		movePos = (newMx - dragStart);
                      Das einzige, was dieser Code tut, ist
                      Code:
                      movePos = ev.pE.x;
                      Du musst du Startposition beim Herunterdrücken der Maustaste erfassen, sonst hast du keinen Anhaltspunkt.
                      [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                      Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                      Super, danke!
                      [/COLOR]

                      Kommentar


                      • #12
                        Also im mousedown Event die Startposition speichern in einer Globalen Variablen z.B. und diese dann als Berechnungsgrundlage benutzen? Meinst du das so in etwa?
                        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

                        Kommentar


                        • #13
                          Genau, wenn du keine globale Variable benutzen willst, kannst du die Startposition auch als Expando-Property an das Element dranhängen.
                          [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                          Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                          Super, danke!
                          [/COLOR]

                          Kommentar


                          • #14
                            Zitat von AmicaNoctis Beitrag anzeigen
                            Genau, wenn du keine globale Variable benutzen willst, kannst du die Startposition auch als Expando-Property an das Element dranhängen.
                            Da muss ich erst mal Googeln was du damit meinst, denn den Begriff habe ich noch nie gehört.
                            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

                            Kommentar


                            • #15
                              Fast jedem Objekt in JS kann man benutzerdefinierte Eigenschaften zuweisen. Diese heißen dann Expando-Eigenschaften. In deinem Falle z. B. target.startPosition

                              Zwar ist target ja vom Typ HTMLElement und hat keine Eigenschaft namens startPosition, aber trotzdem kannst du sie diesem Objekt zuweisen und auch wieder abfragen. Mehr verbirgt sich nicht dahinter.
                              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                              Super, danke!
                              [/COLOR]

                              Kommentar

                              Lädt...
                              X