Mausposition ab dem aktuellen target / element ermitteln

[litterauspirna]

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.

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

[AmicaNoctis]

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:

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

[litterauspirna]

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?

[AmicaNoctis]

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.

[litterauspirna]

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.

[AmicaNoctis]

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.

[litterauspirna]

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

Ich habe folgende Javascripte.

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;
}

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.

.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.

<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

[litterauspirna]

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.

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.

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

[AmicaNoctis]

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

[litterauspirna]

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.

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;
}

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

[AmicaNoctis]

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

		dragStart = newMx - ev.pE.x;
		//position beim bewegen
		movePos = (newMx - dragStart);

Das einzige, was dieser Code tut, ist

movePos = ev.pE.x;

Du musst du Startposition beim Herunterdrücken der Maustaste erfassen, sonst hast du keinen Anhaltspunkt.

[litterauspirna]

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?

[AmicaNoctis]

Genau, wenn du keine globale Variable benutzen willst, kannst du die Startposition auch als Expando-Property an das Element dranhängen.

[litterauspirna]

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.

[AmicaNoctis]

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.