使用jQuery UI堆叠成一个金字塔

Stacking divs into a pyramid using jQuery UI

本文关键字：一个 金字塔 jQuery UI 使用      更新时间：2023-09-26

我试图使用jquery将元素堆叠成金字塔，但我看不到正确的方法。

例如，我想要一个包含3个项目(苹果，香蕉，奇多)的列表。使用可拉或可排序，我想将这些项目移动到不同的元素，并将它们堆叠在金字塔中。

[.........][ 芝士 ][............]

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

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

问题是阻止以金字塔以外的配置堆叠物品的能力，例如，将苹果，香蕉和奇多放入顶部排。

我还想让移动的元素在DOM中实际移动。我认为这意味着可拖放/可放功能不会为这个应用程序工作，但我可能是错误的。

任何帮助都将非常感激。

我为你的问题做了简单的小提琴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();
相关文章：