Two dimensions jquery sortable retrieves a bug in IE

Question

I have two dimensions sorting bug in IE8 and below.

IE just doesn't know to handle this thing.

As you can see, there are two levels of sorting items. Two dimensions. In all of the browsers this thing works perfect. Only IE get crazy.

My code

 $("#experienciasProfissionais").sortable({
    placeholder: 'ui-state-highlight',
    cursor: 'n-resize',
    handle: '.drag',
    axis: 'y',
    revert: true,
    over: function (event, ui) {
        ui.placeholder.css('height', ui.item.css('height'));
    },
    tolerance: 'intersect'
});
$("#experienciasProfissionais > li > ul").sortable({
    placeholder: 'ui-state-highlight',
    cursor: 'n-resize',
    axis: 'y',
    revert: true,
    over: function (event, ui) {
        ui.placeholder.css('height', ui.item.css('height'));
    },
    tolerance: 'intersect'
});

The moment I let the first JQ object to run, everything gets messed up. He accept only one level of sorting. 2 are totally forbidden.

In FF & Chrome everything is just fine. Only IE gives the creeps.

Answer 1

I had this same problem, but your code got me thinking. I believe the bug occurs because the item you are clicking is in both lists, and thus ambiguous. So, IE incorrectly decides to move what you are clicking, as well as any parents that are also sortable. The solution I found was to add a 'handle' definition to the shallow list (e.g. "#experienciasProfissionais > li > ul"). This eliminates the ambiguity so that the thing being dragged can only refer to one sortable list.