JQuery sortable breaks when using connectWith on sortable grids

rooplelty

New Member
I have been working with JQuery sortable grids, and have run into a strange problem where the dragging/placeholders break when there are 2 or more sortable grids linked with the \[code\]connectWith\[/code\] option. So far, I have tested and confirmed the same behavior in Chrome, Firefox, and Safari.It appears as though dragging ignores the mouse position and the placeholder position appears somewhat randomly.Example: http://wilhall.com/tests/apptest.htmlThe above problem is fixed when the grids are not connected using \[code\]connectWith\[/code\]:Example: http://wilhall.com/tests/apptest_2.htmlInstinctively, I decided to throw my code into jsfiddle to post this question, but when I did so, the error was not present when viewed on jsfiddle:Fiddle: http://jsfiddle.net/B2ddx/1/The following is my configuration options for the two sortable grids:\[code\] $(".modules.app").sortable({ cursor: "move", distance: 1, revert: 100, scroll: true, tolerance: "intersect", opacity: 0.6, connectWith: ".modules.bin", placeholder: "placeholder", forcePlaceholderSize: true }).disableSelection(); $(".modules.bin").sortable({ cursor: "move", distance: 1, revert: 100, scroll: true, tolerance: "intersect", opacity: 0.6, connectWith: ".modules.app", placeholder: "placeholder", forcePlaceholderSize: true }).disableSelection();\[/code\]I updated my example pages to include no external CSS or JS other than jquery and jquery-ui, and now use the same jquery & ui versions as jsfiddle, to make sure everything is kosher, but still the problem persists.I am really stumped as to what could be causing this, and will continue posting updates as I try new solutions.Update:In JSFiddle, the \[code\]connectTo\[/code\] option is not working properly, and is not actually linking the lists - which is why the problem does not exist there.Also, the problem is not present when the sortable \[code\]li\[/code\] elements are not floated.
 
Back
Top