Układanie elementów div do piramidy przy użyciu jQuery UI

Question

Próbuję użyć jquery do układania elementów w piramidę, ale nie widzę, aby to naprawić.

Na przykład chciałbym mieć listę z 3 przedmiotami (jabłko, banan, cheeto). Korzystając z funkcji droppable lub sortable, chciałbym przenieść te elementy do innego elementu i ułożyć je w piramidę.

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

[jabłko] [.......... .] [banana]

Do tej pory udało mi się połączyć element list i pusty element, więc wszystkie są sortowalne i mogę wziąć elementy listy i upuścić je do elementu piramidy. To działa.

Problem polega na tym, że nie można układać elementów w konfiguracji innej niż piramida, na przykład wstawiając jabłko, banan i cheetę do górnego rzędu.

Chciałbym również, aby elementy przeniesione do rzeczywistego przeniesienia w DOM. Myślę, że oznacza to, że funkcja przeciągania/zrzucania nie będzie działać dla tej aplikacji, ale mogę się mylić.

Każda pomoc zostanie bardzo doceniona.

Answer 1

Zrobiłem proste skrzypce dla twojego problemu http://jsfiddle.net/QXwyk/6/ Podstawową koncepcją była zmiana listy ul na pytamid przez css. Chociaż dodawanie elementów działa całkiem nieźle, to niestety popsuły się podczas poruszania elementami w piramidzie. Może to ci trochę pomoże lub może być dobrym miejscem do dalszych testów.

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> 

JS

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