为什么这个 jQuery sortables 设置如此不可靠/不稳定？

Question

我有一个页面设置，其主要目的是允许用户将一组绿色块从一个滑动区域拖动到另一个滑动区域并重新排序（通过将一个块拖动到容器右侧来尝试）。

问题是，当我将它们从一个区域拖到另一个区域时，放置和一般可排序性是不可靠的，因为有时您可以放置​​框的区域会消失，或者框对齐不正确（如下图所示）

被拖拽之前

拖动时

正如您所看到的，当左上角的方块被拖动时，它会导致下方的方块“跳”到另一边。我认为这可能是由于 JS 中有占位符选项，就好像我将其删除一样，这不再发生：/

还有（更令人担忧），当从例如右边区域到左边，有时占位符甚至不显示！！

占位符未显示

我还必须在代码中使用$( "#areaOne, #areaTwo" ).sortable( "refresh" ); 才能让连接的容器甚至注意到一个块被拖入其中！也许它没有正确“刷新”..？

有人对我如何解决这些不可靠/不稳定的可排序问题有任何想法吗？

可以在这里找到实时代码> http://jsfiddle.net/WqZ9m/19/

---

更新：

从占位符类中移除边框已经解决了“跳跃”问题，但有时在区域之间拖动块时占位符仍然会消失。当滚动不发生时（即当您删除滚动代码并直接从一个区域拖动到另一个区域时），问题就出现了，所以我猜测问题出在主要的“if”语句中。

通过查看实时 HTML，我还注意到，当占位符消失时，它实际上是跳回到最初拖动它的区域！

更新代码> http://jsfiddle.net/WqZ9m/20/

这是当前问题的屏幕录像 > http://www.youtube.com/watch?v=V-mxOQ2ke28

你会看到占位符（黄色区域）消失了：/

非常感谢任何回复，谢谢

Answer 1

jquery 排序非常可靠。

您的问题是循环插件将视图 div 设置为“显示：无”，从而有效地将它们从 dom 计算中取出（与可见性：隐藏相反）。您永远不必追加和刷新可排序的内容来完成类似的工作。在排序的同时这样做更不稳定，因为你在刷新时没有状态。

我可以建议不要使用循环插件，而是将两个连接的可排序区域放在一个带有“溢出：隐藏”的包装器中。然后，您可以使用 'margin-left' 属性以所需的方式为这些区域设置动画。由于您已经在排序期间测试对象位置，这应该没问题。只需使用您当前的 if 块来容纳您的 $.animate 而不是追加刷新和触发点击。

我用你的小提琴来演示这个原理（显然没有完成代码，但你的问题已经解决了）

http://jsfiddle.net/dHZe9/

干杯！

Answer 2

刚刚对您的项目进行了快速分叉http://jsfiddle.net/biznuge/fFu8G/8/

在我看来，这可能与触发方法（在实现实际点击事件可能执行的操作方面并不完美）或循环插件有关。

我知道我提供的 fork 远非完美，但我似乎没有在这个版本中得到消失的元素（而是得到了一些其他不受欢迎的副作用）。一旦我删除“循环”，这似乎就停止了。以前从未使用过该插件，因此我无法真正提供有关此处可能存在什么冲突的更多信息。

祝你修复成功！

Answer 3

你的 .block css 类有一个 float: left 定义。因此，如果您删除左侧的块，右侧的块将（浮动到那里）取而代之

Answer 4

只需将每个绿色盒子放在一个尺寸相同的 div 容器中，然后拖动一个盒子，而不是盒子容器。