"Koordinaten" von Elementen bekommen

maxsteel · 19.10.2010

Hallo liebe Community,
leider komme ich bei folgendem Problem nicht weiter, hoffentlich könnt ihr mir helfen. Bitte seit nicht zu sauer, aber ich bin kein Profi in JS
Also ich habe einen Haupt-Div in dem einige kleine Elemente(auch div's) positioniert sind, nun möchte ich gern von den einzelnen Elementen die x und y Koordinaten. Also y wollte ich den top Wert (in Abhängigkeit von dem Haupt-Div)
und als x den left Wert.
So ähnlich sollte das aussehen:

Nun die Probleme, wie bekomme ich die top und left Werte mit Javascript?
Komischer Weise liefert document.getElementById('box1').style.top keinen Wert zurück. Auch wenn ich vorher im CSS extra für box1 ein top gesetzt habe.
Und das 2. Problem ist, wie man bei box3 sieht würde dort der x Wert ja bei dem nächstleigenden Element liegen, wie schaff ich das, dass jeder top und left Wert vom Haupt-Div "gemessen" wird?
Danke schonmal.
MfG Maximilian

Lizzard · 19.10.2010

AW: "Koordinaten" von Elementen bekommen

Hallo maxsteel,

bin jetzt leider auch nicht der JS-Freak. Habe aber folgendes im Web gefunden, eventuell hilft dir das ja weiter:

Gruß vom Lizzard

maxsteel · 19.10.2010

AW: "Koordinaten" von Elementen bekommen

Danke Lizzard. Das ist ja mit jquery viel einfacher

Danke. Nochwas, weißt du eventuell wie man wenn ich per drag an drop einen divlayer verschieben lasse die x und y koordinate in ein textfeld anzeigen kann?
Also das immer wenn dich die var x oder var y verändert sich die textfeld value ändert?
Mfg max

fexx · 19.10.2010

AW: "Koordinaten" von Elementen bekommen

schau dir das mal an: jQuery UI - Draggable Demos & Documentation

sokie · 19.10.2010

AW: "Koordinaten" von Elementen bekommen

hallo maxsteel,
es ist anzunehmen, dass das draggen eines elements grundsätzlich so geschieht, dass man es mit der maus geklickt und dann bewegt wird, kannst du die abfrage der position über das mouseup event steuern.
aus dem letzten Post scheint es, als würdest du mit jQuery arbeiten. wenn du das draggable() aus dem jQueryUi verwendest, wird ein event "dragstop" ausgelöst, das du gleich beim initialisieren deines 'draggable' mit eine funktion belegen kannst:

Code:

$( ".selector" ).draggable({    stop: function() { 
    /*hier die position ($(this)) bestimmen und in dein textfeld schreiben*/
   }  });

maxsteel · 19.10.2010

AW: "Koordinaten" von Elementen bekommen

sokie schrieb:
hallo maxsteel,

Code:

$( ".selector" ).draggable({ stop: function() { /*hier die position ($(this)) bestimmen und in dein textfeld schreiben*/ } });

Danke, aber wie ist das wenn die ständig aktualiesiert werden sollen? Also alle 0,1 Sekunden, macht man das so, dass ich die function beim drag-start auslöse, und dann jede millisekunde die schleife wiederholen lasse?
Derzeit lass ich mir die top und left Werte in einem p ausgeben

Code:

var bild1 = $("#bild1");
p.html( "left: " + offset.left + ", top: " + offset.top );

, das klappt auch, nur leider werden die top und left Werte vom Bildschirmrand aus bestimmt. Kann man irgendwas machen, damit sie von dem Hauptdiv in dem sie liegen bestimmt werden?
MfG Maximilian

cebito · 19.10.2010

AW: "Koordinaten" von Elementen bekommen

maxsteel schrieb:
das klappt auch, nur leider werden die top und left Werte vom Bildschirmrand aus bestimmt. Kann man irgendwas machen, damit sie von dem Hauptdiv in dem sie liegen bestimmt werden?
MfG Maximilian

Ja, indem du die top- und left-Werte des übergeordneten divs nimmst, und sie von deinem anderen Ergebnis abziehst

maxsteel · 20.10.2010

AW: "Koordinaten" von Elementen bekommen

Danke für die vielen antworten, nun klappt alles. Ich muss nur noch um nicht jetzt wie statisch die Werte von top und left subtrahieren, sondern noch von den parent-divs. Das sollte aber kein Problem mehr sein.
Hier das fertige Ergebniss:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script>
/*$(function() {
		$( "#bild1" ).draggable({ containment: "parent"});//{ axis: "y" } { grid: [ 20,20 ] }
	});*/


$(function() {
   $( "#tisch" ).draggable({
			start: function() {
				
			},
			drag: function() {
				var bild1 = $("#tisch");
				var offset = bild1.offset();
				var offse_parentt = bild1.offset();
				$( "#offset_left" ).val(offset.left-9);
				$( "#offset_top" ).val(offset.top-35);
				//document.getElementById("offset_left").value = offset.left-9;
				//document.getElementById("offset_top").value = offset.top-179;
				
				
			},
			stop: function() {
		
			},
			containment: "parent"
			
		})});
		
$(function() {
   $( "#fernseher" ).draggable({
			start: function() {
				
			},
			drag: function() {
				var bild1 = $("#fernseher");
				var offset = bild1.offset();
				document.getElementById("offset_left").value = offset.left-9;
				document.getElementById("offset_top").value = offset.top-35;
			},
			stop: function() {
		
			},
			containment: "parent"
			
		})});
   
 
</script>
 <style>
p { margin-left:10px; }
#hauptdiv{
	width: 500px;
	height: 500px;
	border:#009 solid 1px;
	}
	
#bild1{
	margin-top:60px;
	margin-left:100px;
	}
  </style>

</head>

<body>
<input id="offset_left" type="text" value="x" />
<input id="offset_top" type="text" value="y" />
<div id="hauptdiv">
	<img src="tisch.png" id="tisch" />
	<img src="fernseher.png" id="fernseher" />
</div>


</body>
</html>

Hier könnt ihr es euch mal anschaun:
Unbenanntes Dokument
Danke nocheinmal für die viele Hilfe.
Bevor das Thema aber geschlossen wird hätte ich noch eine Frage,
ich kann ja einfach per jquery-ajax variablen von js an php übergeben:

Code:

data:({name:"max", land:"germany"}),

Aber wie kann ich variablen von php an js übergeben?
Eigentlich ist dies ja einfach, aber das php skript liegt ja aufm server und nicht beim Client. Ich könnte ja höchstens:

PHP:

echo var1 . "+" . var2;

und dann in js den string beim + teilen. Diese Lösung gefällt mir aber nicht sonderlich.
Habt ihr da eine idee?
MfG Maximilian

saila · 20.10.2010

AW: "Koordinaten" von Elementen bekommen

Am besten empfiehlt sich da von php json-string:
PHP: JSON-Funktionen - Manual

Somit übergibst du ein json-object, welches du unter javascript oder success: function(data) wieder weiter verarbeiten kannst. Um auf die Objectbereiche zugreifen zu können, könntest du dir über die console von firebug das object genauer ansehen. sprich: console.log(data) innerhalb der success-function.

oder du kannst direkt (wenn du immer weist, was du übergibst) per: data.varA zugreifen. Je nach Aufbau des json was du zurücklieferst.

maxsteel · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Danke, mit json klappt das sehr gut, ich bekomme derzeit so einen String in js:
{"pos_x":12,"pos_y":100}
wobei 12 und 100 var aus php sind. Ich finde nur nichts im Internet wie ich den String mit jquery oder nativem js wieder decoden kann. Habt ihr da ne Idee?
MfG

maxsteel · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Habs gefunden, probieren zahlt sich eben aus

Code:

function pos_load(){
	$.ajax({
	  url: 'load_pos.php',
	  type: "POST",
	  success: function(text) {
		var object_pos 	= jQuery.parseJSON(text);
		var pos_x 		= object_pos.pos_x;
		var pos_y 		= object_pos.pos_y;
		[COLOR="Red"]$("#fernseher").offset({ top: pos_x, left: pos_y });[/COLOR]
		/*offset.left		= pos_x;
		offset.top		= pos_y;*/
		
	  }
	});		
}

Alles funktioniert, ich bekomm die richtigen werte aus der db, nur das zuweisen klappt nicht.
Bei jquery.com ist folgendes als Beispiel:
<script>$("p:last").offset({ top: 10, left: 30 });</script>
genauso habe ich es ja auch , nur es klappt nicht. Ich kann mir mit offset.left und offset.top zwar die werte ausgeben lassen, aber nicht zuweisen.
Wisst ihr wie das geht?
Vielen Dank für die tolle Unterstützung.
MFG Max

Doitsu · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Hm, glaube du meinst parseJSON:
jQuery.parseJSON – jQuery API (Kommentar auf der Seite lesen, um Fehler zu vermeiden)

edit: Also ich habe die Funktion so wie sie oben steht jetzt auf deiner Seite eingefuegt gehabt, und sie klappt wunderbar - allerdings steht im normalen Quelltext was ganz anderes:

Code:

		var object_pos 	= jQuery.parseJSON(text);
		var pos_x 		= object_pos.pos_x;
		var pos_y 		= object_pos.pos_y;
		var picture 	= $("#fernseher");
		var offset 		= picture.offset();
		offset({ top: pos_x, left: pos_y });

Oder testest du das ganze offline?

saila · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Hi,

der zugriff und die Verwendung von text aus success: function(text) ist nicht korrekt. Das wiederum bedeutet, dass du serverseitig - also über php - kein wirkliches json-object erzeugt hast. Im Manual wird eindeutig darauf hingewiesen, wie es letztlich umzusetzen ist.

wie sieht ein json-string(obj) aus: '{retObj: {pos_X: '. $varPosX .', pos_Y:'. $varPosY .'}}';

Der Zugriff innerhalb des success erfolgt per "data.retObj.pos_X" oder "data.retObj.pos_Y". Oder in
deinem Fall:

Code:

$('#fernseher').css({'top':'+ data.retObj.posX,+'left':'+ data.retObj.posY});

Wird alles entsprechend korrekt aufgebaut, ersparst du dir letztlich viel Nacharbeit in JS.

Doitsu · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Hm, und warum ist '{"pos_x":12,"pos_y":100}' nun ein falscher JSON-String? Ist doch eig. das selbe, nur halt nicht zwischengespeichert & mit "?
'Spiele' naehmlich selbst gerade mit JSON rum, und meine Strings sehen genau so aus. Deswegen interessiert mich das nun.. oder ging's darum, dass er DataType: "json" nicht gesetzt wurde? (hab ich auch eben erst mitbekommen, dass das geht.)

saila · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Naja, dataType: json wäre schon erforderlich

jQuery.ajax() – jQuery API

maxsteel · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

So jetzt funktioniert alles. Komischer Weise wurde der Code den ich gepostet hatte nicht automatisch hochgeladen wie alle anderen.
Ich weiß das

Code:

jQuery.parseJSON([COLOR="Red"]text[/COLOR]

) nicht gut ist, ich mach mich gleich an die Arbeit.
Eigentlich ist ja das Ziel mehrere Objekte zu verschieben und dann alle Positionen zu laden. Ich dachte ich mach das mit einer Schleife, welche sich jedes Objekt einzeln vornimmt. Aber woher bekomme ich die Elemente, wenn ich sie nicht statisch setze?
Ich könnte ja:

Code:

function pos_save(){
	var picture = $("img");
	var offset 	= picture.offset();
	var pos_x	= offset.left;
	var pos_y	= offset.top;;

Dann würden ja alle Objekte die ein img sind ausgewählt, aber wie kann ich die der Reihe nach ansprechen?
MFG Max

saila · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Also zum einen war ja geklärt, dass jedes img eine eindeutige ID hat. Diese kannst du sogar - sofern die Daten zu imgages in der Datenbank liegen - mit der id aus der DB setzen.

Um nun die Bilder zu positionieren, wird beim ersten mal, jedes Bild neben dem anderen platziert - sozusagen - default.

Wenn nun ein Bild verschoben wird, hast du ja durch die stop-methode aus dragable die neue Position des verschobenen Bild. Das wiederum sagt dir - die ID auslesen, Position feststellen und Daten an ein Script per ajax senden.
Backendseitig werden nun die Daten (am besten) in der DB-Tabelle gespeichert. Also auch wert-x und wert-y. Soweit wäre der Prozess im Frontend fertig.

Beim erneuten Aufruf, müssen über das Backend die Daten entsprechend per style="" dem jeweiligen Bild zugeordnet werden und letztlich dargestellt werden.

Das wiederum sagt dir nun - du musst immer nur ein einziges Bild beim dragablen speichern und nicht alle - zumal man nicht alle auf einem verschieben kann

.... wenn ich deine Frage/n richtig verstanden habe.

maxsteel · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

saila schrieb:
.... wenn ich deine Frage/n richtig verstanden habe.

Das ist eine gute idee, beim stop des dragens die zu speichern. Ich hatte aber vor das man erst alle verschieben kann und auf knopfruck gespeichert wird.
Ich wollte eben irgendwie drumrumkommen das alle elemente in der db liegen müssen. So müsste ja jedes element welches neu hinzukommt direkt in die db geschrieben werden.
MFG max

Doitsu · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

.. spielt das eine Rolle, ob es gleich in der Datenbank ist, oder halt erst wenn ich auf Speichern klicke?
ansonsten wuerde dir wohl .each weiter helfen.

saila · 21.10.2010

AW: "Koordinaten" von Elementen bekommen

Würde ich nun in Frage stellen. Den Userfreundlich ist, wenn letztlich nicht ständig erst ein Button geklickt werden müsste, welchen man auch mal vergessen könnte. Letzteres nervt dann insofern, als man ein Resultat beim Wiederbesuch hat, was nicht als Ziel verfolgt wurde.