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
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!