JQuery sortable breaks when using connectWith on sortable grids

Question

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 connectWith 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.html

The above problem is fixed when the grids are not connected using connectWith:

Example: http://wilhall.com/tests/apptest_2.html

Instinctively, 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:

       $(".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();

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 connectTo 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 li elements are not floated.

Update: As suggested, I removed any percent heights of the elements containing the sortable items, which fixed the problem but created another one: without any height (the containers took on 0 height), items could not be dragged between the two sortable grids.

To fix this, I tried adding float:left and/or height: 500px to the sortable containers, but the same problem was present.

---

Here is a simplified JSFiddle exhibiting the problem: http://jsfiddle.net/y8xrZ/

If you remove the connectWith option from the .sortable calls, the problem disappears. Note that this error effects the sortable container that is using connectWith. So, in the example, removing connectWith just from the #app container fixes the problem only for the #app container, but not for the #bin container.

Answer 1

Thanks to your find re jQueryUI version, I was able to work this one out.

The biggest clue is of course the behaviour when a connectWith option is set. I hunted through the jquery.ui.sortable.js file, and found that the problem seemed to be caused in the _contactContainers method, although I could not figure out why.

Knowing that jQuery UI 1.8.24 does work, I compared the sortable file in both. While there appear to be quite a number of differences between the two files even in the _contactContainers method, it seems to come down to a difference in an if-else block. In this case, the older version has a condition (else if(this.currentContainer != this.containers[innermostIndex])) whereas the newer one does not.

At about line 734 in jquery.ui.sortable.js in version 1.9.2, we see an if-else block that begins like this:

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else {
....

Just change it to this:

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) {

Adding that condition to the else did the trick for me.