technik_toni
Ensign
- Registriert
- Sep. 2008
- Beiträge
- 250
Hy ich habe ein Problem bei jquery ui. Leider bin ich mit jquery noch nicht so erfahren deshalb brauche ich Hilfe 
Also ich möchte gern zwei Dropzonen erstellen in der ich Divboxen hin und her draggen und droppen kann. Die Anzahl der Divboxen ist beliebig und wird aus einer Datenbank abgefragt.
Nun würde ich gerne das die Divboxen in der Dropzone 1 erscheinen und ich beliebig viele dieser Divboxen in die Dropzone 2 rüberziehen und droppen kann. Diesen Zustand will ich speichern können und beim erneuten Aufruf dieses Profils sollen alle Divboxen in der Dropzone erscheinen in der sie beim Zeitpunkt der Speicherung waren.
Ich habe schon zwei Dropzonen erstellt und kann auch die draggable-Divboxen in die Dropzonen ziehen.
Nun zu meinen Problemen:
1. Wie kann ich die Divboxen die in die Dropzone gedroppt wurden aneinander ausrichten?
Zurzeit werden die Divboxen in der Dropzone einfach dort abgelegt wo ich mit der Maus loslasse. So kommt es vor das mehrere Divboxen übereinander liegen wenn ich Sie an der gleichen Stelle droppe. Ich möchte jedoch das die Divboxen nebeneinander ausgerichtet werden egal wo ich Sie in der Dropzone ablege. So als ob die Boxen ein float+margin haben.
2. Wie kann ich feststellen welche Box in welcher Dropzone liegt?
Dies muss ich wissen damit ich das beim speichern mit in die Datenbank schreiben kann.
3. Wie kann ich die Divboxen beim Aufruf der Seite in den Dropzonen erscheinen lassen?
Derzeit sind meine Divboxen noch außerhalb der beiden Dropzonen. Sie müssten jedoch beim ersten Aufruf der Seite in Dropzone 1 liegen.
Ich hoffe Ihr könnt nachvollziehen was ich will.
Gruß Toni
Also mit html5 und der drag and drop API habe ich es schon hinbekommen. Leider funktioniert das nicht mit dem IE. Daher bin ich auf die Lösung mit jquery gekommen.
Hier mel ein beispiele mit html5.
So will ich es quasi auch mit jquery hinbekommen.
HTML5 Drag & Drop Code1
Beispiel
(So soll es bei mir auch funktionieren jedoch mit zwei dropzonen. Wie man sieht werden die Elemente die man in die Dropzone zieht automatisch ausgerichtet)
HTML5 Drag & Drop Code2

Also ich möchte gern zwei Dropzonen erstellen in der ich Divboxen hin und her draggen und droppen kann. Die Anzahl der Divboxen ist beliebig und wird aus einer Datenbank abgefragt.
Nun würde ich gerne das die Divboxen in der Dropzone 1 erscheinen und ich beliebig viele dieser Divboxen in die Dropzone 2 rüberziehen und droppen kann. Diesen Zustand will ich speichern können und beim erneuten Aufruf dieses Profils sollen alle Divboxen in der Dropzone erscheinen in der sie beim Zeitpunkt der Speicherung waren.
Ich habe schon zwei Dropzonen erstellt und kann auch die draggable-Divboxen in die Dropzonen ziehen.
Nun zu meinen Problemen:
1. Wie kann ich die Divboxen die in die Dropzone gedroppt wurden aneinander ausrichten?
Zurzeit werden die Divboxen in der Dropzone einfach dort abgelegt wo ich mit der Maus loslasse. So kommt es vor das mehrere Divboxen übereinander liegen wenn ich Sie an der gleichen Stelle droppe. Ich möchte jedoch das die Divboxen nebeneinander ausgerichtet werden egal wo ich Sie in der Dropzone ablege. So als ob die Boxen ein float+margin haben.
2. Wie kann ich feststellen welche Box in welcher Dropzone liegt?
Dies muss ich wissen damit ich das beim speichern mit in die Datenbank schreiben kann.
3. Wie kann ich die Divboxen beim Aufruf der Seite in den Dropzonen erscheinen lassen?
Derzeit sind meine Divboxen noch außerhalb der beiden Dropzonen. Sie müssten jedoch beim ersten Aufruf der Seite in Dropzone 1 liegen.
Ich hoffe Ihr könnt nachvollziehen was ich will.
Gruß Toni
Ergänzung ()
Also mit html5 und der drag and drop API habe ich es schon hinbekommen. Leider funktioniert das nicht mit dem IE. Daher bin ich auf die Lösung mit jquery gekommen.
Hier mel ein beispiele mit html5.
So will ich es quasi auch mit jquery hinbekommen.
HTML5 Drag & Drop Code1
Beispiel
(So soll es bei mir auch funktionieren jedoch mit zwei dropzonen. Wie man sieht werden die Elemente die man in die Dropzone zieht automatisch ausgerichtet)
HTML5 Drag & Drop Code2