Why is this jQuery sortables setup so unreliable/unstable?

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开发者_如何学Python 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!

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!

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

Just put each green boxes in a div container with the same dimensions and drag a box, not the box container.