jQuery UI - Connect lists over an accordion

Please see the following fiddle: http://jsfiddle.net/CK9uL/134/

I can drag items from the right to the headers on the left and sort them under each header.

I'm now trying to drag items between headers.

I have tried the following code开发者_高级运维:

$(function() {
    $("#droppable ul").sortable({
        connectWith: $('.connectWith')
    }).disableSelection();
});

But the lists don't seem to be connecting. Any ideas?!

According to the documentation, the connectWith property takes a selector, not a jQuery object. Assuming you have other sortables with the connectWith class, the following should work:

$(function() {
    $("#droppable ul").sortable({
        connectWith: '.connectWith'
    }).disableSelection();
});