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

Question

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

问题在于，当我将它们从一个区域拖到另一个区域时，掉落和一般的可排序性是不可靠的，因为有时你可以放下盒子的区域消失，或者盒子对齐不正确（如下图所示）< / p>

在被拖动之前

拖动时

正如您所看到的，当拖动左上方的块时，它会导致较低的块跳到另一侧。我认为这可能是由JS中的占位符选项引起的，就像我删除它不再发生这样：/

同样（并且更令人担忧的）当拖动一个块时，例如左边的右边区域，有时候占位符甚至都没有显示!!

占位符未显示

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

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

可在此处找到实时代码＆gt; http://jsfiddle.net/WqZ9m/19/

---

UPDATE：

从占位符类中删除边框已对“跳转”问题进行了排序，但是当在区域之间拖动块时，占位符有时仍会消失。当滚动没有发生时（即，当您删除滚动代码并直接从一个区域拖动到另一个区域时）问题就出现了，所以我猜这个问题是在主要的“if”语句中。

通过查看实时HTML，我还注意到，当地方保持消失时，它实际上会跳回到最初拖动它的区域！

更新代码＆gt; http://jsfiddle.net/WqZ9m/20/

以下是当前问题的屏幕录制＆gt; http://www.youtube.com/watch?v=V-mxOQ2ke28

您将看到占位符（黄色区域）消失：/

非常感谢任何回复，谢谢

Answer 1

刚刚对项目http://jsfiddle.net/biznuge/fFu8G/8/

进行快速分析

对我来说，看起来它可能与触发方法（实现点击事件的实现不完美）或循环插件有关。

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

祝你好运！

Answer 2

Jquery Sort非常可靠。

你的问题是循环插件设置超出视图div为'display：none'有效地将它们从dom计算中取出（而不是visiblity：hidden）。您永远不必附加和刷新可排序以使这样的工作。排序时这样做会更加不稳定，因为没有状态就会让你感到清爽。

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

我分叉你的小提琴演示这个原则在行动（显然没有完成代码，但你的问题是固定的）

http://jsfiddle.net/dHZe9/

干杯！

Answer 3

你的.block css类有一个float：left defined。因此，如果您移除左侧的块，右侧的块将（浮动到那里）取代它

Answer 4

将每个绿色框放入具有相同尺寸的div容器中并拖动一个框，而不是框容器。