Limit number of items in sortable (with draggable as source)?

I have a draggable that is connected via connectToSortable to multiple sortables. I want to limit the number of items you can put in each sortable. I can do this when you drag from another sortable, but not when you drag from the draggable to the sortable. A simple example (as JSBin):

$( ".sortable" ).sortable({
  connectWith: ".sortable"
});

$( ".sortable" ).bind( "sortreceive", function(event, ui) {
  // This will not work because the sender is a draggable, which has no "cancel" method
  if ( 4 < $( this ).sortable( 'toArray' ).length ) {
    $(ui.sender).sortable('cancel');
  }
});

$( "#draggable li" ).draggable({
  connectToSortable: ".sortable",
  helper: 'clone'
});

I first tried $(ui.sender).sortable('cancel'); in the sortreceive event, but because the sender is a draggable, not another sortable, it does not have a cancel method and this does not work (so these and these questions don't seem to solve my problem). I have tried following the logic that glues the draggable and the sortable together, but I see no place to jump in and cancel the "faked" stop.

It would be great if there was some kind of visual feedback, like the mouse cursor changing开发者_C百科 to no-drop, and/or a background color change on the sortable.

Context: This is an attempt to answer Limit number of Widgets in Sidebars on the WordPress Stack Exchange. The WordPress widget administration page has a container with all available widgets set up as a draggable, connected to different sortable containers for each sidebar. I don't want to modify the core code, just extend it with as little code as needed to prevent dropping another widget on a "full" sidebar.

You could deactivate the connection when a condition is met:

$("#sortable").bind( "sortreceive", function(event, ui) {
    if ($( "#sortable li" ).length > 3){
        $( "#draggable li" ).draggable( "option", "connectToSortable", false );
    }
});

Fiddle here: http://jsfiddle.net/ZLCDr/1/

Just add the if clause to check the number of elements in the sortable and unbind the draggable event when u have reached that number.

EDIT: (Includes multiple list support now)

$('.draggable').draggable({revert:true,helper:'clone',connectToSortable: '.sortable'});

$('.sortable').sortable({
    connectWith:'.sortable',
    receive: function(ui) {
        if($(this).children().length >=6) {
            $(this).children().addClass('filled');
            $(this).addClass('dontDrop');
            $('.sortable').sortable('option', 'connectWith',$('.sortable').not('.dontDrop'));
            $('.draggable').draggable('option', 'connectToSortable',$('.sortable').not('.dontDrop'));
        }else {
            $(this).children().removeClass('filled');
        }
        add_delete();
    }
});
function add_delete() {
    $('.delete').remove();
    $('.sortable>li').append('<span class="delete">--</span>');
    $('.delete').unbind('click').click(function(){
        if($(this).parent().siblings().length <=5) {//for atmost 6 children in sortable
            $(this).parent().parent().children().removeClass('filled');
            $(this).parent().parent().removeClass('dontDrop');
            console.log($('.sortable').not('.dontDrop'));
            $('.sortable').sortable('option', 'connectWith',$('.sortable').not('.dontDrop'));
            $('.draggable').draggable('option', 'connectToSortable',$('.sortable').not('.dontDrop'));
        }
        $(this).parent().hide('slow').remove();
    });
}
add_delete();

Check fiddle here JSFiddle

So what I have used here is: One can pass not just selectors but elements themselves to the connectWith/connectToSortable options. Whenever an 'ul' has 6 elements I give it the class 'dontDrop' and it is hence excluded from the connections. Hope this clears it out for you.

Let that bounty come this way :D