title: Jquery sortable - limit droppables
body: <p>I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown <a href="https://jqueryui.com/sortable/#portlets" rel="nofollow noreferrer">here</a>, however I am dynamically injecting my portlets, no big problem there.</p>
  
  <pre><code>&lt;div id="mainallapplicant" class="myrow"&gt;&lt;/div&gt;
  &lt;div id="contingent_right" class="myrow"&gt;&lt;/div&gt;  
  </code></pre>
  
  <p>Here is the JavaScript</p>
  
  <pre><code>$( ".myrow" ).sortable({
      connectWith: ".myrow",
      revert: true,
      beforeStop: function( event, ui ) {}
  });
  </code></pre>
  
  <p>I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.</p>
  
  <pre><code>$( ".myrow" ).sortable({
      connectWith: ".myrow",
      revert: true,
      start: function(event, ui) {
          if ($(this).prev().find(".portlet").length == 1) {
              ui.sender.draggable("cancel");
          }
      },
      stop: function(event, ui) {
          if ($(this).prev().find(".portlet").length == 1) {
              ui.item.remove();
              // Show an error...
          }
      }
  });
  </code></pre>