Gunther: jQuery - Drag & Drop plus fester Platz

Hallo Selfgemeinde!

Folgendes Anliegen:
Für eine Administrationsseite eines meiner Webprojekte würde ich gerne folgendes realisieren:
Es geht darum Bildergalerien möglichst einfach zusammenstellen zu können. Dazu befinden sich die Pfadangaben zu den ganzen Thumbnails und Bildern in einer DB. Gemäß einer von mir festgelegten Konvention befinden sich alle Bilder in verschiedenen Ordnern auf einer Verzeichnisebene unterhalb eines per Konfiguration eingestellten Verzeichnisses.
Um jetzt eine neue Galerie (Diashow) zusammenzustellen, werden alle Thumbnails nach Ordnern zusammengefasst (in einem DIV-Container) angezeigt. Am unteren Rand befindet sich ein Container in den diese per Drag & Drop hineingezogen werden können, bzw. innerhalb verschoben werden können, um so die gewünschte Reihenfolge festlegen zu können. Diese wird nach dem Absenden des Formulars per Skript entsprechend weiterverarbeitet.

Soweit funktioniert das Ganze auch (schon). Allerdings wäre es mir lieber, wenn:

  • beim wegziehen aus dem Ursprungscontainer der Platz quasi "reserviert" bleibt
  • ich in dem unteren Container per Doppelklick jedes beliebige Bild wieder auf seinen ursprünglichen Platz "zurückschicken" könnte

Da auf der Website sowieso schon jQuery zum Einsatz kommt, auch für die jetzige Drag & Drop Lösung, wäre es schön, aber nicht zwingend, wenn die neue Variante auch per jQuery realisierbar ist.

Da es sich wie gesagt um eine nicht öffentliche Administrationsseite handelt, müsste das Ganze auch nicht cross-browserfähig sein. Es genügt, wenn es im FF 3.x funktioniert.

Da ich ja weiß, dass wir hier bei SELFHTML sind, erwarte ich natürlich keine fertigen Lösungen. Ein Fingerzeig auf einen möglichen Lösungsansatz wäre schön, denn mir fehlt momentan jegliche Idee (vermutlich aufgrund meiner sehr bescheidenen JS-Kenntnisse), wie ich die Sache mit der festen Platzzuordnung überhaupt umsetzen könnte?

Falls jemand einen Link zu einem ähnlichen Plugin/ Skript hat, wäre ich natürlich auch sehr dankbar. Denn ich will ja nicht unbedingt das Rad neu erfinden, wenn es so etwas, zumindest ähnliches, schon gibt.

Für eure freundliche Unterstützung wie immer meinen besten Dank im Voraus!

Gruß Gunther

PS: Falls noch Informationen zum Vorhaben und seinen Begleitumständen fehlen, liefere ich die natürlich gerne nach. Online gibt es das nicht zu sehen (da geschützter Admin-Bereich - ich bitte um Verständnis).

  1. jQuery UI, genauer gesagt draggable und droppable werden dich interessieren.

    1. Hi suit!

      jQuery UI, genauer gesagt draggable und droppable werden dich interessieren.

      Ja genau!
      Damit habe ich ja meine bisherige Drag & Drop Lösung realisiert. Mein derzeit größtes Problem ist aber, dass ich keine Idee habe, wie ich die Sache mit dem "reservierten" Platz im Ursprungscontainer umsetzen könnte, sodass ein Thumbnail bei Doppelklick aus meinem Container für die neue Galerie wieder auf seinen ursprünglichen Platz im Ausgangscontainer "zurückhüpft"?

      Es gibt auf den Seiten von jqueryui zwar so ähnliche Beispiele, aber halt nur "ähnlich". Und ich bin (bis jetzt zumindest) nicht in der Lage, die entsprechende Transferleistung zu erbringen, um das auf meine Anforderungen anzupassen.

      Gruß Gunther

      1. Hi,

        jQuery UI, genauer gesagt draggable und droppable werden dich interessieren.
        Ja genau!
        Damit habe ich ja meine bisherige Drag & Drop Lösung realisiert. Mein derzeit größtes Problem ist aber, dass ich keine Idee habe, wie ich die Sache mit dem "reservierten" Platz im Ursprungscontainer umsetzen könnte, sodass ein Thumbnail bei Doppelklick aus meinem Container für die neue Galerie wieder auf seinen ursprünglichen Platz im Ausgangscontainer "zurückhüpft"?

        Du könntest schauen, ob sich das mit der Option revert bei Draggable hinbekommen lässt - "If set to true, the element will return to its start position when dragging stops."
        Damit könntest du das Bild an seine ursprüngliche Position "zurückkehren" lassen - und dann seine Quelle gegen ein Blind-GIF o.ä. austauschen. In den Container fügst du dann ein neues Bildobjekt ein, dem du die Adresse des gerade ge-drag-ten gibst. Die Referenz auf das ursprüngliche Bildobjekt könntest du als zusätzliche Eigenschaft am neuen Bildobjekt ablegen - so kannst du den Quellentausch wieder rückgängig machen, um das Bild per Doppelklick wieder an seiner ursprünglichen Position anzeigen zu lassen. (Das dann nicht mehr benötigte Bildobjekt aus dem Container wäre dann noch wieder zu entfernen.)

        Ich weiss aber nicht, ob sich diese revert-Option mit Droppable "verträgt" - ob du dann wirklich noch ein "Dropping" in den Zielcontainer bekommst. Das müsste man ausprobieren.

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
        1. Hi!

          Du könntest schauen, ob sich das mit der Option revert bei Draggable hinbekommen lässt - "If set to true, the element will return to its start position when dragging stops."
          Damit könntest du das Bild an seine ursprüngliche Position "zurückkehren" lassen - und dann seine Quelle gegen ein Blind-GIF o.ä. austauschen. In den Container fügst du dann ein neues Bildobjekt ein, dem du die Adresse des gerade ge-drag-ten gibst. Die Referenz auf das ursprüngliche Bildobjekt könntest du als zusätzliche Eigenschaft am neuen Bildobjekt ablegen - so kannst du den Quellentausch wieder rückgängig machen, um das Bild per Doppelklick wieder an seiner ursprünglichen Position anzeigen zu lassen. (Das dann nicht mehr benötigte Bildobjekt aus dem Container wäre dann noch wieder zu entfernen.)

          Ja, das klingt nach einer guten Idee - danke schon mal! :-)

          Ich weiss aber nicht, ob sich diese revert-Option mit Droppable "verträgt" - ob du dann wirklich noch ein "Dropping" in den Zielcontainer bekommst. Das müsste man ausprobieren.

          Ich werde das mal ausprobieren, nachdem ich mich vorher erstmal ausgiebigst mit den Funktionen vertraut gemacht habe.

          Nachdem ich jetzt immerhin schon mal rausgefunden habe, dass sich diese ganzen Funktionen nicht mit einer Darstellung per display:table(-...) vertragen! Ich hatte schon leichte Zweifel an meinem Verständnis der Materie ...!

          Rückmeldung, bzw. Rückfragen folgen ...

          Gruß Gunther

          1. Hi!

            Du könntest schauen, ob sich das mit der Option revert bei Draggable hinbekommen lässt - "If set to true, the element will return to its start position when dragging stops."
            Damit könntest du das Bild an seine ursprüngliche Position "zurückkehren" lassen - und dann seine Quelle gegen ein Blind-GIF o.ä. austauschen. In den Container fügst du dann ein neues Bildobjekt ein, dem du die Adresse des gerade ge-drag-ten gibst. Die Referenz auf das ursprüngliche Bildobjekt könntest du als zusätzliche Eigenschaft am neuen Bildobjekt ablegen - so kannst du den Quellentausch wieder rückgängig machen, um das Bild per Doppelklick wieder an seiner ursprünglichen Position anzeigen zu lassen. (Das dann nicht mehr benötigte Bildobjekt aus dem Container wäre dann noch wieder zu entfernen.)

            Rückmeldung, bzw. Rückfragen folgen ...

            Hier mal eine erste Rückmeldung:
            Also nachdem ich mich jetzt etwas ausführlicher mit jQuery UI beschäftigt habe, muss ich erstmal feststellen, dass das zwar in vielen Dingen sehr praktisch ist, weil es die Implementierung diverser Funktionalitäten mit nur wenigen Codezeilen erlaubt, aber ...

            Das größte "Aber" ist wohl, dass das Markup auch dementsprechend gestaltet sein muss, was aber wohl nicht immer möglich ist. Auch hatte ich ja bereits festgestellt, dass die meisten der Funktionen nicht mit einer Darstellung per display:table(-...) funktionieren.

            Das schränkt die Verwendung in der Praxis dann doch ziemlich ein, wie ich finde.

            Auch bei meinem konkreten Fall konnte ich das Markup nicht so gestalten, wie es für die Drag & Drop Funktion notwendig gewesen wäre. Ich habe mir deshalb nun damit beholfen, dass ich ein Thumbnail per Doppelklick in den Container für die neue Galerie "klone" und das ursprüngliche Thumbnail per display:none ausblende. Bei einem Doppelklick auf das Thumbnail im Galerie-Container wird dieses aus dem DOM entfernt und das ursprüngliche Thumbnail wieder auf display:block gesetzt.

            Im Galerie-Container sind die einzelnen Thumbnails "sortable", also sortierbar. Die Reihenfolge wird nach jeder Sortierung jeweils in ein hidden Input-Feld geschrieben, welches beim Klick auf einen Absende-Button übertragen wird.

            Nicht zu 100% meine favorisierte Lösung, aber für den Anfang ganz brauchbar. Vielleicht fallen mir ja noch ein paar Verbesserungsmöglichkeiten ein (, die ich auch umgesetzt kriege).

            Gruß Gunther