✔ Knifflig: Koordinaten von verschiebbaren Objekten

U

UnkiDunki

Grünschnabel
Hi,

ich habe folgenden Wunsch: Objekte auf dem Bildschirm via Drag&Drop verschiebbar machen und beim Betätigen des "OK"-Buttons die Positionen der Objekte in Datenbank speichern und beim nächsten Seitenaufruf wieder auf die gespeicherten Positionen setzen.

Mir war jetzt nicht ganz klar, ob ich das in "HTML" oder "JavaScript" posten sollte, hoffe, dass das so ok ist.

Mein Lösungsansatz:
Habe gegoogelt und wurde hier fündig.
Habe das umgesetzt und das Verschieben von Objekten, z.B. Tabellen funktioniert bei mir wunderbar. Das Setzen der Positionen ist ja auch kein Problem, weil das ja im div-Tag direkt angegeben werden kann.
Das EINZIGE Problem: Wie bekomme ich beim Absenden des Formulares, in welchem sich die verschiebbaren Objekte befinden deren aktuellen Positionen, dass ich das in die Datenbank speichern kann?
Hat da jemand eine Idee? Ist das überhaupt über diesen Lösungsweg möglich?

Vielen Dank schon mal im Voraus :)
 
Hi,

du könntest vom Element ausgehend die Eigenschaften offsetTop und offsetLeft auslesen. Je nach Struktur kann es notwendig sein, sich im Dokumentenbaum mit Hilfe von offsetParent zur Wurzel durchzuhangeln.
Code: 
// Offset eines Elements ermitteln
// Parameter: objElem - Objekt des Elements, dessen Offset bestimmt werden soll
//            strDir  - left = linkes Offset, sonst = oberes Offset
function getOffset(objElem, strDir){
  // Startwert
  var intOffsetParent = (strDir == "left")? objElem.offsetLeft : objElem.offsetTop;
  // Elternelement mit Offset ermitteln
  var objHelpOffset = objElem.offsetParent;

  // Solange OffsetElemente existieren
  while(objHelpOffset){
    intOffsetParent += (strDir == "left")? objHelpOffset.offsetLeft : objHelpOffset.offsetTop;  // Offset aufaddieren
    objHelpOffset = objHelpOffset.offsetParent;                                                 // Nächstes OffsetElement
  }

  return intOffsetParent;
}
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Auf jeden Fall schon mal vielen Dank! Das Problem ist, dass ich mit JavaScript bisher nichts zu tun hatte und ich bei deinem Code nicht viel durchblicke :)
Ich meine, anhand deiner Erklärung verstehe ich schon, welche Aufgabe er haben soll, aber... mhmm
Das, was ich noch nicht erwähnt hatte, war, dass ich das irgendwie in PHP verarbeiten will. Klappt das mit deinem Code? Wie bekomme ich was von JavaScript nach PHP?
:confused:

Wie der Ochs vorm Berg...
 
Hi,

um die Daten zum Server zu bekommen und dort z.B. mit PHP verarbeiten zu können, kannst du ein Bildobjekt erstellen. Diesem weist du als Quelle das verarbeitende PHP-Script zu. Als URL-Parameter werden die Koordinaten des gewünschten Elements ermittelt.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// Offset eines Elements ermitteln
// Parameter: objElem - Objekt des Elements, dessen Offset bestimmt werden soll
//            strDir  - left = linkes Offset, sonst = oberes Offset
function getOffset(objElem, strDir){
  // Startwert
  var intOffsetParent = (strDir == "left")? objElem.offsetLeft : objElem.offsetTop;
  // Elternelement mit Offset ermitteln
  var objHelpOffset = objElem.offsetParent;

  // Solange OffsetElemente existieren
  while(objHelpOffset){
    intOffsetParent += (strDir == "left")? objHelpOffset.offsetLeft : objHelpOffset.offsetTop;  // Offset aufaddieren
    objHelpOffset = objHelpOffset.offsetParent;                                                 // Nächstes OffsetElement
  }

  return intOffsetParent;
}

function sendData(objElem){
  // Neues Bildobjekt erstellen und Daten per GET-Parameter übergeben
  var objImg = new Image();
  objImg.src = "xmlhttp_request_dummy.php?offx="+getOffset(objElem, 'left')+"&offy="+getOffset(objElem)+"&"+new Date().getTime();
}
 //-->
</script>
</head>
<body>
<button onclick="sendData(document.getElementById('id_04'));">sendData -> PHP</button>
<div id="id_01">id_01</div>
<div id="id_02" onclick="alert('left: ' + getOffset(this, 'left') + ', top: ' + getOffset(this));">id_02 (click me!)</div>
<div id="id_03" style="position: relative;">
  id_03
  <div id="id_04" style="position: absolute; top: 50px; left: 400px; border: 1px solid #000;" onclick="alert('left: ' + getOffset(this, 'left') + ', top: ' + getOffset(this));">id_04 (click me!)</div>
</div>
</body>
</html>
Im Beispiel sollte auch die Verwendung der Funktion klar werden.

Auf der Serverseite kannst du nun die übergebenen GET-Parameter auswerten und verarbeiten. Folgendes Beispiel fügt diese an eine Datei an:
Code: 
<?php
// TODO: Datenbankroutinen, hier: Daten einfach an File anhängen
$hFile = fopen("testfile.txt", "a");
fwrite($hFile, "Koordinaten: (" . $_GET['offx'] . ", " . $_GET['offy'] . ")\n");
fclose($hFile);
?>
Ciao
Quaese
 
Hi Quaese,

danke noch mal für deine Bemühungen :)

Also... habe deinen Code ausprobiert und stehe jetzt vor 3 Problemen:

1.) Beim Klick auf deinen Button tut sich garnichts. Woran mag das liegen? Beim Klicken sehe ich mal ein kurzes Aufleuchten von "http://localhost..." (oder so ähnlich, aber Arbeitsumgebung localhost) in der Statuszeile meines Browsers und dann garnichts. Keine Reaktion. Abgeschickt, bzw. die PHP aufgerufen wird also nicht.

2.) Dachte zuerst, dass es daran liegt, dass ich nicht mit Bildern arbeite, sondern mit einer Tabelle als Objekt der Begierde. Ist das mit deinem Code auch möglich? Ich frage deshalb, weil du ja mit nem neuen Image-Objekt arbeitest.
Natürlich habe ich zum Probieren deines Codes anschließend nur Bilder verwendet, da ich dachte, dass er nur mit Bildern umgehen kann. Es ging aber trotzdem nicht. Die Koordinaten werden mir aber richtig angezeigt, wenn man auf ein solches Objekt klickt.

3.) Wenn die beiden Punkte oben funktionieren würde, habe ich noch das Problem, dass es ja mehr als nur ein Objekt zum Verschieben gibt und ich nicht bei jedem einzelnen Verschieben immer anschließend jeweils den Sende-Button betätigen möchte.
Denke mal, dass ich dann alle Objekte bzw. deren Positionen in einem Feld an die PHP übergeben muss, aber das sehe ich dann, wenn es erst mal mit einem Objekt funktioniert!

Hoffe, du konntest etwas mit meiner Fehlerbeschreibung anfangen :) Sonst frage bitte noch mal nach

LG

UnkiDunki
 
Hi,

bei mir funktioniert es - Beispiel.

Die Daten werden über das neue Bildobjekt an das Script in der Datei xmlhttp_request_dummy.php geschickt. Dort wird lediglich ein Textfile geöffnet und Datum, Zeit und Koordinaten eingetragen. Eine Reaktion im Ausgangsdokument erfolgt nicht (im Bsp. kann das Textfile aber angezeigt werden, um die eingetragenen Daten zu überprüfen).

Ciao
Quaese
 
Hi Quaese,

[edit]: Es funktioniert jetzt! Problem 1 wäre damit gelöst! 2 auch! Habe anstatt ein Bild meine Tabelle genommen und da macht es wirklich keinen Unterschied: Positionen werden erfolgreich in die Datenbank geschrieben.

Jetzt muss ich nur noch gucken, wie das mit mehreren Objekten funktioniert. Das dürfte aber kein Problem sein, wenn doch, dann melde ich mich noch mal :)

VIELEN DANK

P.S. Noch eine Kleinigkeit und dann passt alles: Wenn ich jetzt auch den Namen des Elements mit übergeben möchte an die PHP-Datei, wie müsste das dann aussehen.
Bei ObjElem.getName() funktioniert es nicht. Wie heisst da die richtige Methode?
 
Zuletzt bearbeitet:
Hi,

ich gehe davon aus, dass du dem Element im name-Attribut einen Wert zugewiesen hast, den du übermitteln möchtest.
Code: 
objElem.getAttribute('name');
Ciao
Quaese
 
Nein, meinte das id-Attribut, aber funktioniert ja genauso :)
Abschließend noch mal vielen Dank. Jetzt funktioniert alles und ich bin wunschlos glücklich ;)

Chau
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück