title: Jquery disable a droppable after it has reached a limit of 3 elements
body: <p>I have two list boxes that drag and drop I want my second list box to only allow 3 list items from the first list box. My problem is that when I reach the limit it does the counter works but I get this error: </p>
  
  <blockquote>
    <p>Uncaught Error: cannot call methods on draggable prior to
    initialization; attempted to call method 'disable'</p>
  </blockquote>
  
  <p>and it allows it to drag more than 3 elements. I would like it to stop at 3 elements and when I drag out from the second list box it minus the counter.</p>
  
  <pre><code>var counter = 0;
  
  $("#listbox2").droppable({
      drop: function(event, ui) {
          if (counter &lt;= 3) {
              counter++;
              $('#counter_text').text(counter);
          }
          if (counter === 3) {
              $('#listbox2').droppable("disable");
              $('#listbox1 li').draggable("disable");
          }
      }
  })
  
  $("#listbox1").droppable({
      drop: function(event, ui) {
          counter--;
          $('#counter_text').text(counter);
  
      }
  })
  </code></pre>