Peter: Weboberfläche ähnlich wie iGoogle

HI Leutz,

ich beschäftige mich gerade mit der Thematik eine Weboberfläche ähnlich wie die von iGoogle zu entwerfen.

Was mich im Klartext interessiert, ist die Tatsache n Elemente in beliebiger Reihenfolge vom User per "Drag and Drop" anordnen zu lassen (und die Informationen über Position und Zustand in einem Cookie speichern zu lassen).

Das speichern der Position und des Zustands stellt an sich kein Problem dar, deswegen auch im Klammern, dass "Drag and Drop"-Prinzip an sich auch nicht, jedoch habe ich keine Ahnung wie ich an die "KI", die festlegt wo das Element nun überall eingefügt werden kann, wie die anderen Elemente "verschoben" werden müssen, usw. ran gehe.

Ich brauch keinen fertigen Code, mich interessiert einfach wie ich das Problem angehen könnte und was alles beachtet werden muss wenn man so ein Skript selbst schreibt.

Für Hinweise die zur Lösung der Aufgabenstellung führen wäre ich sehr dankbar :-)

MFG
Peter

  1. Die üblichen Drag-and-Drop-Bibliotheken bieten an, dass man für die Drop-Container Bedingungen definieren kann, welche Elemente in sie hineingeworfen werden können. Das sind entweder CSS-artige Selektoren, z.B. .klasse, oder man kann selbst Funktionen definieren, die ausgeführt werden, wenn ein Container während des Draggings überfahren wird. Darin lässt sich dann prüfen, ob die Box aufgenommen werden kann oder sich der Container "sperrt". Die Container sind gleichzeitig per Drag and Drop sortierbare Listen.
    Ob es da eine Fertiglösung gibt, weiß ich nicht, aber ich vermute stark, dass die großen JavaScript-UI-Bibliotheken (Yahoo UI, jQuery UI usw.) entsprechende Module bzw. Plugins anbieten.

    Mathias

    1. N'abend Mathias,

      alle Ansätze die ich bis jetzt gefahren bin, beruhen auf ziemlich abgefahrenen Berechnungen der neuen möglichen Position, mehr möcht ich dazu aber nicht sagen (schäm mich)....

      ...Könntest du vielleicht deinen Satz:

      »»...Die Container sind gleichzeitig per Drag and Drop sortierbare Listen....

      Ein wenig näher ausführen???

      MFG und Danke
      Peter

      1. Schau dir mal diese Demos an:
        http://ui.jquery.com/demos/sortable
        Von der einfachen Liste über mehrere verknüpfte bis hin zu den "Portlets".

        Mathias

  2. Moin,

    ..., jedoch habe ich keine Ahnung wie ich an die "KI", die festlegt wo das Element nun überall eingefügt werden kann, wie die anderen Elemente "verschoben" werden müssen, usw. ran gehe.

    also ich würde einfach einen "Render" für Das Model schreiben
    also wenn ich in meiner DB/Cookie stehen habe:
    1. Plugin-X
    2. Plugin-Y
    3. Plugin-W

    "Rendert" die Methode

    ________________
    |PLUGIN-X      |
    |blablablan    |
    |______________|
    ________________
    |PLUGIN-Y      |
    |blubblubbl    |
    |______________|
    ________________
    |PLUGIN-W      |
    |lololololo    |
    |______________|

    oder wenns mehrzeilig ist:
    ________________  ________________
    |PLUGIN-X      |  |PLUGIN-Y      |
    |blablablan    |  |blubblubbl    |
    |______________|  |______________|
    ________________
    |PLUGIN-W      |
    |lololololo    |
    |______________|

    Das sollte ein recht einfacher algorithmus lösen.
    Wenn jemand ein Element Verschiebt, musst Du einfach nur den Cookie ändern und neu "Rendern" und fertig. Das hat wenig mit KI zu tun : P

    MfG

    1. N'abend Èner,

      danke für dein Feedback aber alle Sachen die du aufgezählt hast, stellen sich mir nicht als Problem dar. Mich würde interessieren, wie ich die neuen möglichen Positionen eines Elements ermitteln kann und im selben Zug auch mögliche "betroffene" Element neu anordnen kann.

      Hab meine Frage vielleicht auch einfach blöd formuliert :-(

      MFG und Danke
      Peter