[GELÖST] JQuery-ui draggable: Positionsdaten in Datenbank speichern

[Karli1969]

Hallo zusammen,

ich habe bisschen rumgestöbert und paar interessante Funktionen gefunden: draggable und resizeable un jquery-ui.

Das verschieben von IMG und Größe ändern klappte auch auf Anhieb. Schön wäre es, wenn die verschobenen und resizededten Objekte nach dem neuladen der Seite auch gespeichert werden würden. Dazu müsste man an die Bildkoordinaten heran kommen.

Habe beim Rumgoogeln folgendes gefunden:

https://forum.jquery.com/topic/save-position-of-draggable-item
Hier der entscheidende Code:

$(function(){
var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
    $.each(positions, function (id, pos) {
        $("#" + id).css(pos)
    })

    $("#draggable3").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
});

Und direkt ausprobiert. Das klappt einwandfrei, nur werden die Daten nicht offen gezeigt, sondern einfach nur lokal in einem Cookie gespeichert. Wenn ich also auf dem gleichen Rechner die Seite neu öffne, sind die Bilder immer noch dort, wo ich sie vorher hingeschoben habe.

Ich habe auch versucht, die Position der Bilder nach dem Verschieben mit alert(ui.position) anzeigen zu lassen, aber da wurde nur objekt Objekt oder so angezeigt. Ich kann auch nicht in das Cookie hineinschauen. Das steckt wohl in Chrome in der Datei Cookies, die ja eine SQL3 Datei sein soll.

Wie komme ich nach dem Verschieben an die aktuellen Positionsdaten heran?

Danke und viele Grüße
Karl

 

[Dormilich]

Ich habe auch versucht, die Position der Bilder nach dem Verschieben mit alert(ui.position) anzeigen zu lassen, aber da wurde nur objekt Objekt oder so angezeigt.

Weil ui.position eben ein Objekt ist, steht ja auch so in der Doku. Und ja, alert() ist keine Debug-Funktion. Nimm besser console.log().

Ich kann auch nicht in das Cookie hineinschauen. Das steckt wohl in Chrome in der Datei Cookies, die ja eine SQL3 Datei sein soll.

Mit den Dev-Tools geht auch das.

 

[Karli1969]

Vielen Dank für die Antwort.
Ich lese die Bildkoodinaten jetzt mit bild.style.left und bild.style.top aus. Das ist zwar vielleicht etwas umständlich, aber es funktioniert.

Besonders danke ich dir für den Hinweis auf die Dev Tools in Chrome. Habe mich schon länger damit herumgeärgert, dass ich bei Fehlern im Javascript-Code keine Fehlermeldungen bekam. War ein Fehler drin, funktionierte der Code einfach nicht. Über das komische console.log hatte ich mich auch immer gewundert, weil ich nicht wusste, wo die Meldungen hingeschrieben wurden.
Alert hat mir in manchen Situationen geholfen, aber optimal ist das ja auch nicht.

Wie man mit den Dev-Tools in Cookies hinein schaut, habe ich noch nicht herausgefunden, aber da mein eigentliches Problem ja gelöst ist, verschiebe ich das auf ein anderes mal.