- Registriert
- 01.03.05
- Beiträge
- 452
Hallo allerseits,
wie ich hier schon mal erläutert hatte, soll ich für unser Institut einen Bachelor-Semesterplan für unsere Webpräsenz erstellen.
Nun bin ich mittlerweile - nach vielen Unterbrechungen, Zwangspausen, Konzeptionsphasen, usw. - relativ weit gediegen damit.
Den aktuellen Stand findet ihr hier: Bachelor-Semesterplan!
Bitte nicht am Design mäkeln, das ist alles noch absolute Rohkost.
Zum Problem:
Ich habe für das Verschieben, Platzieren und Sortieren die jquery-eigenen UI-Komponenten "draggable", "droppable" und "sortable" verwendet. Nun hänge ich sozusagen am Übergang von "Droppable" zu "Sortable" - nämlich bei den dropzones (also den Semestern).
Konkret:
Wenn Ihr mal die Module verschiebt, die bereits im 1. Semester platziert sind, werdet Ihr merken, dass hier lediglich die "Sortable"-Komponente arbeitet - und zwar wie gewünscht. Platziert Ihr aber mal zum Test verschiedene Module im 2. Semester und wollt diese anschließend ebenfalls sortieren, so werdet Ihr merken, dass hier einige Dropzones "aufleuchten" - also ihre "accept"-Eigenschaft kund tun. Wirklich dorthin verschieben könnt Ihr Module dort hin aber nicht, da ich beim Ablegen die "Draggable"-Komponente kille (Aufgrund der vielen Abhängigkeiten unter den Modulen, möchte ich das nachträgliche Verschieben verbieten, stattdessen offeriere ich nur ein Trash-Icon, mit dem das Modul wieder gelöscht werden kann.).
Mein Wunsch:
Weg mit der "accept"-Eigenschaft, sobald die Module mal platziert sind!
Nicht nur, dass das unschön aussieht und es durchaus auch immer wieder mal zu kleineren Problemen führen kann, weil man die Module immer noch zu anderen Dropzones ziehen kann (und von dort evt. Skriptbefehle aufgesaugt werden).
Das Hauptproblem: Es suggeriert dem Nutzer, er könne das Modul tatsächlich verschieben - was er aber ja faktisch nicht kann (und auch nicht können soll!)!
Der Code:
Da ich ja mit vielen Dropzones und noch viel mehr draggables arbeiten muss, habe ich den Weg gewählt, den Dropzones unter "accept" zwei CSS-Klassen zuzuweisen. Das sieht dann z.B. für das 1.Semester so aus:
Die Klasse ".toAll" besitzen alle Semester, da es einige Module gibt, die nicht an bestimmte Semeter gebunden sind. Andere jedoch bekommen im HTML-Code z.B. die CSS-Folge "toSem1 toSem2 toSem5" zugewiesen - somit sind sie nur mit dem 1., 2. und 5. Semster verlinkt.
Mein erster Lösungsversuch:
Ich dachte mir, ich könnte das einfach alles umgehen, in dem ich beim Ablegen der Module nicht nur die "Draggable"-Komponente kille, sondern auch die CSS-Klassen "toSem1, toSem2, ..." .
Aber dem war leider nicht so. Die Folge: Zwar leuchten nun die dropzones nicht mehr auf beim erneuten Anfassen - das liegt aber nur daran, dass sie gar nicht erst damit aufhören. Klingt komisch, ist aber so.
Soll heißen: Möchte ich ein Modul in ein Semester platzieren, so leuchten erst einmal - korrekterweise - alle dropzones mit der passenden "accept"-Eigenschaft auf. Lasse ich dann das Modul in eines der Semester fallen, so leuchten die anderen dropzones aber weiter und kehren nicht wieder zu ihrer alten CSS-Formatierung (also -Klasse) zurück.
Wo ist also die Lösung?
Somit sehe ich zwei Ansatzmöglichkeiten für eine evt. Lösung:
Habt Ihr vielleicht eine Idee? Vielleicht stehe ich auch einfach nur auf dem Schlauch und sehe den Wald vor lauter Bäumen nicht...
Schönen Dank schonmal im Voraus für Ideen!
Schöne Grüße
Rhinhold
wie ich hier schon mal erläutert hatte, soll ich für unser Institut einen Bachelor-Semesterplan für unsere Webpräsenz erstellen.
Nun bin ich mittlerweile - nach vielen Unterbrechungen, Zwangspausen, Konzeptionsphasen, usw. - relativ weit gediegen damit.
Den aktuellen Stand findet ihr hier: Bachelor-Semesterplan!
Bitte nicht am Design mäkeln, das ist alles noch absolute Rohkost.
Zum Problem:
Ich habe für das Verschieben, Platzieren und Sortieren die jquery-eigenen UI-Komponenten "draggable", "droppable" und "sortable" verwendet. Nun hänge ich sozusagen am Übergang von "Droppable" zu "Sortable" - nämlich bei den dropzones (also den Semestern).
Konkret:
Wenn Ihr mal die Module verschiebt, die bereits im 1. Semester platziert sind, werdet Ihr merken, dass hier lediglich die "Sortable"-Komponente arbeitet - und zwar wie gewünscht. Platziert Ihr aber mal zum Test verschiedene Module im 2. Semester und wollt diese anschließend ebenfalls sortieren, so werdet Ihr merken, dass hier einige Dropzones "aufleuchten" - also ihre "accept"-Eigenschaft kund tun. Wirklich dorthin verschieben könnt Ihr Module dort hin aber nicht, da ich beim Ablegen die "Draggable"-Komponente kille (Aufgrund der vielen Abhängigkeiten unter den Modulen, möchte ich das nachträgliche Verschieben verbieten, stattdessen offeriere ich nur ein Trash-Icon, mit dem das Modul wieder gelöscht werden kann.).
Mein Wunsch:
Weg mit der "accept"-Eigenschaft, sobald die Module mal platziert sind!
Nicht nur, dass das unschön aussieht und es durchaus auch immer wieder mal zu kleineren Problemen führen kann, weil man die Module immer noch zu anderen Dropzones ziehen kann (und von dort evt. Skriptbefehle aufgesaugt werden).
Das Hauptproblem: Es suggeriert dem Nutzer, er könne das Modul tatsächlich verschieben - was er aber ja faktisch nicht kann (und auch nicht können soll!)!
Der Code:
Da ich ja mit vielen Dropzones und noch viel mehr draggables arbeiten muss, habe ich den Weg gewählt, den Dropzones unter "accept" zwei CSS-Klassen zuzuweisen. Das sieht dann z.B. für das 1.Semester so aus:
Code:
$(".container ul#sem1").droppable({
[COLOR="RoyalBlue"]accept[/COLOR]:[COLOR="SeaGreen"] '.toSem1, .toAll'[/COLOR],
activeClass: 'drop-accept',
hoverClass: 'drop-active',
tolerance: 'intersect',
drop: function(event, ui) {
...
}
});
Die Klasse ".toAll" besitzen alle Semester, da es einige Module gibt, die nicht an bestimmte Semeter gebunden sind. Andere jedoch bekommen im HTML-Code z.B. die CSS-Folge "toSem1 toSem2 toSem5" zugewiesen - somit sind sie nur mit dem 1., 2. und 5. Semster verlinkt.
Mein erster Lösungsversuch:
Ich dachte mir, ich könnte das einfach alles umgehen, in dem ich beim Ablegen der Module nicht nur die "Draggable"-Komponente kille, sondern auch die CSS-Klassen "toSem1, toSem2, ..." .
Aber dem war leider nicht so. Die Folge: Zwar leuchten nun die dropzones nicht mehr auf beim erneuten Anfassen - das liegt aber nur daran, dass sie gar nicht erst damit aufhören. Klingt komisch, ist aber so.
Soll heißen: Möchte ich ein Modul in ein Semester platzieren, so leuchten erst einmal - korrekterweise - alle dropzones mit der passenden "accept"-Eigenschaft auf. Lasse ich dann das Modul in eines der Semester fallen, so leuchten die anderen dropzones aber weiter und kehren nicht wieder zu ihrer alten CSS-Formatierung (also -Klasse) zurück.
Wo ist also die Lösung?
Somit sehe ich zwei Ansatzmöglichkeiten für eine evt. Lösung:
a) Erzwingen der CSS-Formatierung, nachdem das Modul platziert wurde (wie/wo auch immer)
b) Individuelles Killen der "accept"-Eigenschaft (wie/wo auch immer)
b) Individuelles Killen der "accept"-Eigenschaft (wie/wo auch immer)
Habt Ihr vielleicht eine Idee? Vielleicht stehe ich auch einfach nur auf dem Schlauch und sehe den Wald vor lauter Bäumen nicht...
Schönen Dank schonmal im Voraus für Ideen!
Schöne Grüße
Rhinhold