我有一个页面设置，其主要目的是允许用户将一组绿色块从一个滑动区域拖动到另一个滑动区域并重新排序（尝试将一个块拖动到容器右侧）。
问题是，当我将它们从一个区域拖动到另一个区域时，放置和一般可排序性是不可靠的，因为有时可以放置框的区域会消失，或者框对齐不正确（如下图所示）
之前被拖动
被拖动时
正如您所看到的，当拖动左上角的块时，它会导致下部的块“跳”到另一侧。我认为这可能是由于 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
您将看到占位符（黄色区域）消失：/
非常感谢您的回复，谢谢
I have a page setup where the main aim is to allow users to drag and re-order a set of green blocks from one sliding area to another (have a go by dragging a block to the right of the container).
The problem is that when I drag them from area to area the dropping and general sortable-ness is unreliable in that sometimes the area where you can drop the box disappears, or the boxes align incorrectly (shown in the image below)
Before being dragged
When being dragging
As you can see when the top left block is dragged it cause the lower one to 'jump' over to the other side. I think this could be caused by having the placeholder option in the JS as if I remove it this no longer happens :/
Also (and more worryingly) when dragging over a block from, e.g. the right area to the left, sometimes a placeholder does not even show!!
Placeholder not showing
I had to use $( "#areaOne, #areaTwo" ).sortable( "refresh" ); in the code also to get the connected container to even notice a block is being dragged into it! Maybe it is not 'refreshing' correctly..?
Does anyone have any ideas as to how I could fix these unreliable/unstable sortable issues?
The live code can be found here > http://jsfiddle.net/WqZ9m/19/
UPDATE:
Removing the border from the placeholder class has sorted the 'jumping' issue, but the placeholder still disappears sometimes when a block is being dragged between areas. The issue goes when the scrolling does not take place (ie. when you remove the scrolling code and drag directly from one area to another), so I'm guessing that the issue is within the main 'if' statement.
From looking at the live HTML I have also noticed that when the place hold disappears, it's actually jumping back to the area from which it was originally dragged!
Updated Code > http://jsfiddle.net/WqZ9m/20/
Here is a Screen recording of the current problem > http://www.youtube.com/watch?v=V-mxOQ2ke28
You will see that the placeholder (the yellow area) disappears :/
Any replies are really appreciated, thanks
发布评论
评论（4）
Jquery 排序非常可靠。
你的问题是循环插件将视图外的 div 设置为“display:none”，有效地将它们从 dom 计算中剔除（而不是“visiblity:hidden”）。您永远不需要附加和刷新可排序来使类似的事情起作用。排序的时候这样做就更不稳定了，因为你刷新的时候没有状态。
我可以建议您不要使用循环插件，而是将两个连接的可排序区域放入带有“overflow：hidden”的包装器中。然后，您可以使用“margin-left”属性以所需的方式为这些区域设置动画。由于您已经在排序期间测试对象位置，这应该没有问题。只需使用当前的 if 块来容纳 $.animate，而不是附加刷新并触发单击。
我分叉了你的小提琴来演示这一原理的实际应用（显然没有完成代码，但你的问题已解决）
http://jsfiddle. net/dHZe9/
干杯！
Jquery Sort is very reliable.
Your problem is the cycle plugin setting out of view divs to 'display:none' effectively taking them out of dom calculations (as opposed to visiblity: hidden). You should never have to append and refresh sortable to make something like this work. Doing so while sorting is even more unstable, because you are refreshing without a state.
May I suggest that rather than using the cycle plugin, you put both your connected sortable areas inside a wrapper with 'overflow:hidden'. You can then animate those areas in the desired way with the 'margin-left' property. Since you are already testing for object position during sort this should be no problem. Simply use your current if block to house your $.animate rather than append refresh and trigger click.
I forked your fiddle to demonstrate this principle in action (obviously not completed code, but your problem is fixed)
http://jsfiddle.net/dHZe9/
Cheers!
刚刚对您的项目进行了快速分叉 http://jsfiddle.net/biznuge/fFu8G/8/
在我看来，这可能与触发方法（在实现实际点击事件可能执行的操作方面并不完美）或循环插件有关。
我知道我提供的分叉远非完美，但我似乎没有在这个版本中得到消失的元素（而是得到了其他一些不良的副作用）。当我删除“循环”后，这似乎就停止了。以前从未使用过该插件，因此我无法提供有关此处可能存在冲突的任何进一步信息。
祝您修复顺利！
just did a quick fork of your project http://jsfiddle.net/biznuge/fFu8G/8/
To me it looks like it might be something to do with either the trigger method (which isn't perfect at achieving what an actual click event might do) or the cycle plugin.
I know the fork I've provided is incredibly far from perfect, but I don't seem to get the disappearing element with this version (instead getting several other undesirable side-effects). This did seem to stop pretty much as soon as I removed "cycle". Never used that plug before so I can't really offer any further info on what the conflict might be here.
Good luck with your fix!
你的 .block css 类有一个 float: left 定义。因此，如果您删除左侧的块，右侧的块将（漂浮在那里）取代它的位置
your .block css class has a float: left defined. so if you remove the block on the left, the block on the right will (float there to) take its place
只需将每个绿色框放入具有相同尺寸的 div 容器中，然后拖动一个框，而不是框容器。
Just put each green boxes in a div container with the same dimensions and drag a box, not the box container.