使用jQuery UI将div堆叠成金字塔

Question

我正在尝试使用jquery将元素堆叠成金字塔,但我看不到它是正确的.

例如,我想有一个包含3个项目的列表(苹果,香蕉,cheeto).使用droppable或sortable,我想将这些项移动到不同的元素,并将它们堆叠在金字塔中.

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

[苹果] [...........] [香蕉]

到目前为止,我已经能够组合list元素和空元素,因此它们都是可排序的,我可以将列表项放到金字塔元素中.这有效.

问题是阻止在金字塔以外的配置中堆叠项目的能力,例如,将苹果,香蕉和cheeto插入顶行.

我还希望将移动的元素实际移动到DOM中.我认为这意味着draggable/droppable函数不适用于此应用程序,但我可能错了.

任何帮助将不胜感激.

Answer 1

我已经为您的问题做了简单的小提琴http://jsfiddle.net/QXwyk/6/ 基本概念是通过css将ul列表更改为pytamid。虽然添加元素效果很好，但不幸的是，在金字塔中移动元素时它变得混乱。也许这会对您有所帮助，或者它可能是进一步测试的好地方。

网页

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