Undraggable After Sorting

Please take a look: http://jsfiddle.net/JeaffreyGilbert/VkghS/25/

Currently we can drag the bars to the left/right well. The problem is after we sort the color names, we cannot drag (not sort开发者_运维知识库) the bars.

Any help would be appreciated, thank you.

the colornames sortable update handler should include a reinitialization of the draggable. the thing is you're adding new bars that didn't exist on document ready. so, it should look something like this:

   $( ".colorNames" ).sortable({
        handle: '.handle',
        update : function () {
            var barsOrder = $('.gantt').sortable('serialize');
            var namesOrder = $('.colorNames').sortable('serialize');

            barsTemp = $('<div></div>');

            colorNames = namesOrder.split('&');
            for (i = 0; i < colorNames.length; i++) {
                bar = $('#barWrap_' + (colorNames[i].split("="))[1]);
                barsTemp.append(bar);
            }

            $('.gantt').append(barsTemp.html());
            $( ".bar" ).draggable({
                grid: [ 20, 0 ]
            });
        }
    });