Stacking divs into a pyramid using jQuery UI

Question

I'm attempting to use jquery to stack elements into a pyramid, but I can't see to get it right.

For example, i would like to have a list with 3 items (apple, banana, cheeto). Using droppable or sortable, i would like to move those items to a different element, and stack them in a pyramid.

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

[apple][...........][banana]

So far, I've been able to combine the list element and the empty element so they are all a sortable, and i can take the list items and drop them into the pyramid element. This works.

The problem is preventing the ability to stack the items in a configuration other than a pyramid, for example, inserting apple, banana and cheeto into the top row.

I would also like to have the elements that are moved to actually be moved in the DOM. I think this means that the draggable/droppable function won't work for this application, but i might be wrong about that.

Any help would be greatly appreciated.

Answer 1

I've made simple fiddle for your issue http://jsfiddle.net/QXwyk/6/ Base concept was to change ul list to pytamid by css. While adding elements work pretty well, unfortunatelly it got messed up while moving elements in pyramid. Maybe this will help you a bit or it might be a good place for further testing.

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();