Why is this jQuery sortables setup so unreliable/unstable?
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) jsfiddle.net/dHZe9 Cheers!
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) jsfiddle.net/dHZe9/ Cheers!
Thanks for that! It is the display:none causing the issue :) – Mac Jul 27 at 18:57.
Just did a quick fork of your project 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.
Thanks for the comment but Sam Dufel sorted the 'jumping' issue by removing the borders. The other issue still needs fixing though! :) – Mac Jul 16 at 18:18.
Just put each green boxes in a div container with the same dimensions and drag a box, not the box container.
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). As you can see when the top left block is dragged it cause the lower one to 'jump' over to the other side. 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!
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! Does anyone have any ideas as to how I could fix these unreliable/unstable sortable issues?
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!
I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.