具有各种高度的jquery可排序块答案

【问题标题】：jquery sortable blocks with various height具有各种高度的jquery可排序块
【发布时间】：2011-12-06 11:22:17
【问题描述】：

我正在尝试使用 JQuery .sortable() 制作具有不同高度的可排序块。

但是，如果您尝试将大块向右移动，则其中一个小框会移动到底部并留下空白处。

当我将 float: right 设置为父 div 而不是 float: left 时，我无法正确地将大块拖到左侧。

我了解它为什么会发生以及float 的工作原理，但我找不到解决方法。

jsFiddle sample

更新： Here 是我正在尝试做的事情的全貌。我想要的只是能够从空白页面创建这个结构，只使用 6 种宽度、可调整高度和可排序项目。

【问题讨论】：

很难避免当前的行为，因为将大块向右移动会导致两个小块向左浮动，就像它应该的那样工作:) 你必须关闭浮动，具体取决于按当前排序顺序...
关闭哪个元素的浮动？ :) 我看到两种方法：1. 在拖动过程中取决于鼠标 x 位置浮动：左到浮动：右（当拖动到父 div 的右侧时） 2. 将小 div 放置到一个父容器中以创建一个“组”。但我希望有更简单的解决方案:)
jsfiddle.net/tnLcg/5 这是我在上面发布的解决方案 #1 的示例。这可能适用于 2 列示例，但有 4 列和更多不同的块，这太疯狂了 :(
我不确定您认为 sortable 将如何帮助您解决这个问题。该图像对于每个块最终应属于哪一列确实令人困惑。我认为 sortable 主要是为相同大小的对象设计的，这就是为什么您在将其弯曲到此应用程序时遇到问题的原因。

标签： javascript jquery html css jquery-ui-sortable

【解决方案1】：

现在可以工作了我最初有一个几乎工作模型，使用第二个包装 div 围绕短项。该错误在我的 FF Win 7 中（在 IE9 中似乎没问题），它看到大块和块组之间存在轻微的高度差异，因此较低的浮动“击中”左上角的一个（如果它是一个大块）并且不会向左走。当我查看 Firebug 时，FF 显示的 computed 边框不是 1px，而是 0.916667px，所以我不知道这是否是问题所在（现在已在下面修复）。

见http://jsfiddle.net/tnLcg/47/。我最初启用了在空头之间进行排序的能力，但我认为正确的功能是让这样的举动成为交换。也许http://www.eslinstructor.net/demo/swappable/swappable_home.html 可以实现在短持有者堆栈之间工作。

编辑--Firefox 已修复：我保留了短边框，但将其设置为透明（因此它的计算与双高框相同），然后使用内部元素的相对定位进行调整这对我来说现在可以在 FF 中使用：编辑：改进版（4 列） http://jsfiddle.net/tnLcg/99/。

【讨论】：

感谢您的回答，但仍然无法正常工作。如果我试图移动小盒子，它们就会和大盒子一起倒塌。最重要的是 - 我已经非常简化了我在 jsFiddle 的示例，说明为什么只有两列。因此，如果您尝试使用 4 列，可能块的行为将完全不正确。
@ink--4 列运行良好。我确实注意到占位符有些奇怪，所以我修改了代码（javascript 和 css）以适应它（jsfiddle.net/tnLcg/99）。我不确定您所说的“如果我尝试移动小盒子，它们会与大盒子一起折叠”。我已经修改了代码，因此如果您在它们之间单击，您可以将两个“块”一起移动。如果试图将一个小盒子移动到一个大盒子区域，你会期待什么行为？另外，您是否打算将小框位置与其他小框位置一起移动？
关于“折叠”：screenshot for prev jsFiddle。看起来 4 列效果很好，但在您的代码中，小块已经手动分组（.short_holder）。我不知道用户将创建什么，他将为新块设置什么宽度和高度。在动态添加块的情况下如何管理这些组？
好吧，如果用户可以创建任何大小，那么我不确定您是否可以管理它。如果您设置限制（最大块、半块、四分之一块等），那么您也许可以让它工作。我还不清楚你希望小块如何与大块交互。
好的，根据另一条评论，我认为这 6 种尺寸的宽度设置为 1（即完整）、3/4、2/3、1/2、1/3、1/4 ，正确的？ any 的高度可以是任何大小。但是什么时候块应该“堆叠”在彼此之上？如何知道两个 1/2 宽的积木是并排放置还是叠放在一起？你是否期望两个 1/2 宽的方块并排放置在一个 1/4 方块的顶部，旁边是一个 2/3 方块，这两个方块都堆叠在一个 3/4 方块的顶部（我希望不会） ?这就是我不完全理解您所期望的块大小之间的相互作用的意思。

【解决方案2】：

您可以尝试 jQuery Masonry 进行这种布局（如果我理解您的问题的话）。

【讨论】：

是的，你理解正确，除了你的例子不支持拖放（或者我错过了什么？）。我试图在this demo 中将 .sortable() 添加到 #container ，但这不起作用。这正是我想要的，除了拖放，但没有 DnD 它对我来说毫无用处:(
我想我在类似的question 中找到了可排序和可调整大小的砌体here 的示例-有时效果不好，但确实有效！也许稍后有人会发布比它更好的想法，所以我会等待接受您的回答。感谢您的链接！
砌体不工作。见The mythical drag n’ drop multi-column grid plugin
@desandro：嘿，好吧。我会相信你的话作为这件事的权威。 :D
box2d-js.sourceforge.net 呢？至少，这会很有趣（也许组织你的方块俄罗斯方块会很有帮助..）。无论如何，为什么你在做这件事？也许，如果您描述您的确切情况，我们可以找出另一种方法。（就我个人而言，我不喜欢这种复杂的拖动，因为很多时候用户在弄清楚如何移动碎片以获得他想要的布局时会很痛苦..）

【解决方案3】：

如果您希望两半能够独立移动，请将它们分成 2 列，然后使用 connectWith 选项使它们可以在两者之间拖动：

http://jsfiddle.net/ujahd/

如果您希望两半保持组合在一起，则将它们组合成一个 div：

http://jsfiddle.net/W5VzD/1/

【讨论】：

您的示例可以使用多列吗（其中块的大小可以是父宽度的 1/4、1/3、1/2 ... 3/4 以及各种高度）？
你可以通过将 1/4 宽度等分组来让它像你的模拟一样工作，但是一旦人们开始拖动东西，它就会变得一团糟。

【解决方案4】：

如果您有兴趣阅读它，还有this 教程。希望你找到了答案。

编辑：虽然它不是 jquery。

【讨论】：