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

我正在尝试使用jQuery将元素堆叠到金字塔中，但我看不到它正确。使用jQuery UI将div堆叠成金字塔

例如，我想列出3个项目（苹果，香蕉，cheeto）。使用droppable或排序，我想将这些项目移动到不同的元素，并将它们堆叠在金字塔中。

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

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

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

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

我还想要移动的元素实际移动到DOM中。我认为这意味着可拖动/ droppable函数不适用于这个应用程序，但我可能是错误的。

任何帮助将不胜感激。

来源

2013-04-04 user2246607

一个相当复杂的问题，这一点。如果我从头开始研究它，我可能会使用bootstrap和jQueryUI的组合来使用引导程序的网格系统创建金字塔：http://twitter.github.com/bootstrap/scaffolding.html#gridSystem然后定义它们中的哪一个可以放置形成视觉金字塔。不是一个真正的答案，但我对你最终的方法感兴趣。请更新！ – 2013-04-04 20:38:06

你需要提供一些代码或者更好的是一个jsfiddle。帮助你会更容易。你的意思是一个金字塔顶部有一个项目，然后是2，然后是3，然后是4等？或者你的意思是这些项目会创建一个空白的三角形1，然后是2，然后是2，然后是2，然后是2，然而很多时候需要跨越底部？我们需要一些清晰的。 – 2013-04-04 20:46:22

这是代码体系结构还是可视化表示？你提到JQUI，所以我认为后者...我不明白什么会这么困难？再次假设你确定每个元素都是特定的宽度/高度...可以说是矩形。为填充空间创建一个空类，并以编程方式添加您的真实元素（或者我猜）。实际问题是什么，或者说最终的结果是什么？如果你可以请，试着更好地解释它 – 2013-04-05 13:12:41

我已经为你的问题做了简单的小提琴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>

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

来源

2013-04-05 12:58:19 Dmonix

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

回答

相关问题