title: How can I make a jQuery sortable no longer sortable after dragging?
body: <p>I have a <code>div</code> with elements that we can drop to two sortable div's. We want to cap the target div to 3 elements, so that they can't add more. (But the elements should remain sortable in the target.) How can I do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".fs").sortable({
      connectWith : '.fs',
      revert: true,
      helper: "clone",
      receive: function(event, ui) {
          if ($(this).children().length &gt;= 3) {
              $(this).sortable("cancel");
          }
      }
  }).disableSelection();
   
  $("#content .item").draggable({
      connectToSortable: ".fs",
      helper: "clone",
      revert: "invalid"
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    margin: .5ex;
    border: 1px solid black;
    padding: .5ex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;div class="demo"&gt;
      &lt;div id="content" &gt;
          Content:
          &lt;div class="item"&gt;item 1&lt;/div&gt;
          &lt;div class="item"&gt;item 2&lt;/div&gt;
          &lt;div class="item"&gt;item 3&lt;/div&gt;
          &lt;div class="item"&gt;item 4&lt;/div&gt;
          &lt;div class="item"&gt;item 5&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="fs" id="id1"&gt;Target 1&lt;/div&gt;
      &lt;div class="fs" id="id2"&gt;Target 2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>