Question

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 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.

Answer 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 😀