Two dimensions jquery sortable retrieves a bug in IE

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").sor开发者_运维技巧table({
    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.

---

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.

---

newLi.find('ul.selectedFieldPlaceholder').sortable().bind('mousedown', function(oEvent, ui){
   oEvent.stopPropagation();
});

I have a ul > li that is sortable and those li's also have ul's with sortable li's, anyways all you have to do is call stopPropagation() on the 2nd level/nested ul and IE won't propagate your drag to the top level.