HTML Drag Drop mit Speicherfunktion

Computer: Software & Programmierung Programmierung allgemein
#1

Hallo, ich kenne mich leider fast gar nicht mit HTML aus. Trotzdem muss ich eine Drag and Drop Seite erstellen, wo verschiedene Items zu vorgegebenen Kategorien „geclustert“ werden können. Das funktioniert auch soweit ganz gut. Allerdings muss ich am Ende das ganze abspeichern können. Mein Ziel ist, dass ich den Link zu dieser Seite an bestimmte Personen schicken kann, diese machen dann das Drag and Drop „Spiel“ und schicken mir ihr Ergebnis. Ich habe einfach ein Code aus dem Internet so angepasst, dass es für meine Seite passt (deshalb werdet ihr bestimmt viele unsinnige Zeilen im Code finden, aber besser konnte ich es leider nicht). Aber bei "ondrop="trashIt verschwinden die Items nur „was sie ja auch machen sollen“. Allerdings sollte dann irgendwie festgehalten werden „vll per Word Macro“ welches Item zu welchem Faktor gezogen wurde.

Hier ist ein Link zu meinem Code (in Dropbox)

https://dl.dropbox.com/u/18192150/DnD%20Versuch.html

Wenn jmd die Datei nicht runterladen möchte kann Ich den Code auch gerne hier posten. Is aber recht lang geworden :smile:

Ich hoffe irgendjemand hat eine Idee und das nötige know how!

Viele Grüße

Jakob

#2

Hallo Jakob,

Deine Frage hat nichts mit HTML zu tun sondern mit Javascript. Damit bin ich aber nur sehr eingeschränkt vertraut.

Aber bei
"ondrop="trashIt verschwinden die Items nur „was sie ja auch
machen sollen“. Allerdings sollte dann irgendwie festgehalten
werden „vll per Word Macro“ welches Item zu welchem Faktor
gezogen wurde.

Mir fällt allerdings auf, dass Du überall nur „trashIt“ nutzt. Damit werden doch alle Elemente entfernt. Für Werte, die Du erhalten/speichern willst, würde ich eher ein „dropIt“ mit der „appendChild“-Methode erwarten. Ausserdem brauchst Du eindeutige IDs für Deine „Buckets“ - hier steht überall dieselbe ID (bucket3). Ich denke, Du musst erst einmal die Inhalte der unterschiedlichen „Buckets“ schaffen, damit Du diese abfragen bzw. speichern kannst.

Wir der JS-Code allerdings aussehen muss, kann ich Dir nicht sagen.

Grüße, Renaade

#3

Guten Tag

Zuerst mal ist dein draggable… dieses hat allerdings eine Breite und Höhe von 0px * 0px und die Items können somit nicht verschoben werden (weil nicht greifbar mit der Maus). Vielleicht direkt auf das Tag legen (span entfernen).

In deiner Drop-Funktion bekommst du im Event-Parameter dann event.target (das Drop-Element) und du kannst beispielsweise über die ID event.target.id herausfinden, wohin gedroppt wurde.

Danach einfach mit einem Ajax-Request zum Server schicken, wo du dann die Daten in deine Datenbank werfen kannst.

Den Ajax-Request machst du am einfachsten, indem du das jQuery-Framework einbindest und dann die $.ajax-Methode verwendest. (http://api.jquery.com).

Viel Spass