title: Limit number of items in sortable (with draggable as source)?
body: <p>I have a draggable that is connected via <code>connectToSortable</code> to <em>multiple</em> 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 <a href="http://jsbin.com/owezam/4" rel="nofollow noreferrer">JSBin</a>):</p>
  
  <pre><code>$( ".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 &lt; $( this ).sortable( 'toArray' ).length ) {
      $(ui.sender).sortable('cancel');
    }
  });
  
  $( "#draggable li" ).draggable({
    connectToSortable: ".sortable",
    helper: 'clone'
  });
  </code></pre>
  
  <p>I first tried <code>$(ui.sender).sortable('cancel');</code> in the <code>sortreceive</code> event, but because the sender is a <code>draggable</code>, not another <code>sortable</code>, it does not have a <code>cancel</code> method and this does not work (so <a href="https://stackoverflow.com/questions/2438516/jquery-sortable-limit-number-of-items-in-list">these</a> and <a href="https://stackoverflow.com/questions/3539708/jquery-ui-draggable-sortable-droppable-disable-drop-when-droppable-limit-is-reach/3673837#3673837">these</a> questions don't seem to solve my problem). I have tried following <a href="https://github.com/jquery/jquery-ui/blob/1.8.12/ui/jquery.ui.draggable.js#L467" rel="nofollow noreferrer">the logic that glues the draggable and the sortable together</a>, but I see no place to jump in and cancel the "faked" stop.</p>
  
  <p>It would be great if there was some kind of visual feedback, like the mouse cursor changing to <code>no-drop</code>, and/or a background color change on the sortable.</p>
  
  <p>Context: This is an attempt to answer <a href="https://wordpress.stackexchange.com/questions/19907/limit-number-of-widgets-in-sidebars">Limit number of Widgets in Sidebars</a> 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 <a href="http://core.trac.wordpress.org/browser/tags/3.2/wp-admin/js/widgets.dev.js#L72" rel="nofollow noreferrer">the core code</a>, just extend it with as little code as needed to prevent dropping another widget on a "full" sidebar.</p>