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

【问题标题】：Stacking divs into a pyramid using jQuery UI使用 jQuery UI 将 div 堆叠成金字塔
【发布时间】：2013-03-27 02:41:14
【问题描述】：

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

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

[…………][cheeto][…………]

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

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

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

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

任何帮助将不胜感激。

【问题讨论】：

这是一个相当复杂的问题。如果我从头开始，我可能会使用 bootstrap 和 jQueryUI 的组合使用 bootstrap 的网格系统创建金字塔：twitter.github.com/bootstrap/scaffolding.html#gridSystem，然后定义其中哪些是可放置的以形成视觉金字塔。不是一个真正的答案，但我对你最终解决这个问题的方法很感兴趣。请更新！
您需要提供一些代码，或者最好提供一个 jsfiddle。帮助你会更容易。你的意思是金字塔顶部有一个项目，然后是 2，然后是 3，然后是 4 等等？还是您的意思是这些项目创建了一个空三角形 1，然后 2，然后 2，然后 2，然后 2，然后是桥接底部需要多少？我们需要澄清一下。
这是代码架构还是视觉表示？你提到了JQUI，所以我假设后者……我不明白有什么难的？再次假设您可以接受每个元素都是特定的宽度/高度......让我们说一个矩形。为填充空间创建一个空类，并以编程方式（或者我猜是手动添加）添加您的真实元素。实际问题是什么，或者更确切地说，最终结果是什么？如果可以，请尝试更好地解释一下

标签： javascript jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

我为你的问题做了简单的小提琴http://jsfiddle.net/QXwyk/6/ 基本概念是通过 css 将 ul list 更改为 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>

$("#fruits, #pyramid").sortable({
    connectWith: ".sortable",
    placeholder: "ui-state-highlight",
    cursor: "move",
}).disableSelection();

【讨论】：