Question

我试图使用jquery将元素堆叠成金字塔，但我无法正确看待它。

例如，我想要一个包含3个项目的列表（apple，banana，cheeto）。使用droppable或sortable，我想将这些项移动到不同的元素，并将它们堆叠在金字塔中。

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

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

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

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

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

非常感谢任何帮助。

Answer 1

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

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

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

1 个答案: