DIVS in eine Pyramide stapeln mit jQuery UI

Ich versuche mit jQuery Elemente in eine Pyramide zu stapeln, aber ich kann nicht sehen, um es richtig zu machen.DIVS in eine Pyramide stapeln mit jQuery UI

Zum Beispiel möchte ich eine Liste mit 3 Artikeln haben (Apfel, Banane, Cheeto). Mit Dropable oder Sortierbar möchte ich diese Elemente zu einem anderen Element verschieben und sie in einer Pyramide stapeln.

[.........] [cheeto] [............]

[Apfel] [.......... .] [banane]

Bisher konnte ich das Listenelement und das leere Element kombinieren, so dass sie alle sortierbar sind, und ich kann die Listenelemente in das Pyramidenelement übernehmen. Das funktioniert.

Das Problem verhindert die Möglichkeit, die Elemente in einer anderen Konfiguration als einer Pyramide zu stapeln, z. B. Apfel, Banane und Cheeto in die obere Reihe einzufügen.

Ich möchte auch die Elemente, die bewegt werden, um tatsächlich in das DOM verschoben werden. Ich denke, das bedeutet, dass die ziehbare/absetzbare Funktion für diese Anwendung nicht funktioniert, aber ich könnte mich darin irren.

Jede Hilfe würde sehr geschätzt werden.

Quelle

2013-04-04 user2246607

Ganz ein komplexes Problem, das. Wenn ich von vorne anfangen würde, würde ich wahrscheinlich eine Kombination aus Bootstrap und jQueryUI verwenden, um die Pyramide mit dem Grid-System des Bootstrap zu erstellen: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem und dann definieren, welche davon sind droppable, um die visuelle Pyramide zu bilden. Nicht wirklich eine Antwort, aber ich bin an Ihrem möglichen Ansatz interessiert. Bitte aktualisieren! –

Sie müssen etwas Code oder besser eine jsfiddle bereitstellen. Es wird einfacher sein, dir zu helfen. Meinst du eine Pyramide mit einem Gegenstand oben, dann 2, dann 3, dann 4 usw.? Oder meinst du, die Gegenstände erzeugen ein leeres Dreieck 1, dann 2, dann 2, dann 2, dann 2, dann aber so viele, um den Boden zu überbrücken? Wir brauchen etwas Klarheit. –

ist diese Code-Architektur oder visuelle Darstellung? Du nennst JQUI, also nehme ich Letzteres an ... Ich verstehe nicht, was so schwer wäre? Angenommen, Sie sind wieder in Ordnung, denn jedes Element ist eine bestimmte Breite/Höhe ... sagen wir mal ein Rechteck. Erstellen Sie eine leere Klasse für Füllraum und fügen Sie Ihre realen Elemente programmatisch (oder von Hand, denke ich). Was ist das eigentliche Problem, oder eher, Endergebnis? versuchen Sie es ein bisschen besser zu erklären, wenn Sie bitte –

Ich habe einfache Geige für Ihr Problem gemacht http://jsfiddle.net/QXwyk/6/ Basis-Konzept war, ul Liste zu pytamid durch CSS zu ändern. Während das Hinzufügen von Elementen ziemlich gut funktioniert, wurde es leider beim Verschieben von Elementen in der Pyramide durcheinander gebracht. Vielleicht hilft dir das ein bisschen, oder es ist ein guter Ort für weitere Tests.

Html

<ul id="pyramid" class="pyramid sortable"> 
</ul> 

<ul id="fruits" class="fruits sortable"> 
    <li>cheeto</li> 
    <li>apple</li> 
    <li>banana</li> 
    <li>kiwi</li> 
    <li>strawberry</li> 
    <li>limon</li> 
</ul>

$("#fruits, #pyramid").sortable({ 
    connectWith: ".sortable", 
    placeholder: "ui-state-highlight", 
    cursor: "move", 
}).disableSelection();

Quelle

2013-04-05 12:58:19 Dmonix

DIVS in eine Pyramide stapeln mit jQuery UI

Antwort

Verwandte Themen