7

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

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

[…………][奇多][…………]

[苹果][…………][香蕉]

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

问题是无法将物品堆叠成金字塔以外的配置，例如，将苹果、香蕉和奇多插入顶行。

我还希望将移动的元素实际移动到 DOM 中。我认为这意味着可拖动/可放置功能不适用于此应用程序，但我可能错了。

任何帮助将不胜感激。

4

1 回答 1

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();
于 2013-04-05T12:58:19.490 回答