Question

Code can be found here: http://www.myhorizon.ca/client_central/sortable_test.php

Hello folks of Stackoverflow,

I have a list of categories that are sortable. Each category has a list of sections that are also sortable but said sections can be dragged from category to category. My code works fine in Firefox and Chrome but in IE when I drag and drop my sortable items the children elements (like the toolbar icons) get all jarbbled (for lack of a better word). Sometimes the elements just disappear and sometimes they are in the strangest places.

I have a feeling IE is having a problem redrawing all my stuff but I can’t figure out how to fix it. Any help is appreciated 🙂

    $('.category').sortable({
    'handle' : '.cat-drag-and-drop',
    connectWith: '.category',
    start: function()
    {
        $('.category *').disableSelection();
    },
    stop: function()
    {
        $('.category *').enableSelection();
    }
});

$('.section').sortable({
    'handle' : '.section-drag-and-drop',
    connectWith: '.section',
    start: function()
    {
        $('.section *').disableSelection();
    },
    stop: function()
    {
        $('.section *').enableSelection();
    }
});

Answer 1

I “fixed” it by chaining .focus().blur() after my enabling of the selection (which I guess forces IE to redraw the elements in their correct position). I would have liked to avoid such a fix but sometimes you have to do what you have to do 🙂