title: jQuery: how to enable droppable again
body: <p>I want it to be possible to drag (draggables) several HTML elements into several other HTML elements. (droppables)</p>
  
  <p>I found the jQuery UI draggable/droppable.</p>
  
  <p>Currently, I define all li elements inside an ul as draggable. I also have three divs which accept all the draggable li elements.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;foo&lt;/li&gt;
    &lt;li&gt;bar&lt;/li&gt;
    &lt;li&gt;baz&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Defining them as draggable:</p>
  
  <pre><code>$('li').draggable({ revert: 'invalid' });
  </code></pre>
  
  <p>My droppable divs:</p>
  
  <pre><code>&lt;div class="droppable" id="div1"&gt;&lt;/div&gt;
  &lt;div class="droppable" id="div2"&gt;&lt;/div&gt;
  &lt;div class="droppable" id="div3"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Make the divs droppable:</p>
  
  <pre><code>$('div.droppable').droppable({ accept: 'li', drop: funcDrop, out: funcOut });
  </code></pre>
  
  <p>I now want that only one li element can be dropped into a div at the same time. I am trying to do that by disabling the droppability inside the div element I dropped the draggable, like so:</p>
  
  <pre><code>funcDrop = function(event, ui) { 
  
    $(this).droppable('disable');
  
  }
  </code></pre>
  
  <p>This works. Now I am not able drop any further li elements into this div. The problem is, how/when to enable the div again? Clearly if the contianing draggable was removed. So I tried to enable the div inside funcOut:</p>
  
  <pre><code>funcOut= function(event, ui) { 
  
    strIdValue = event.target.id;
  
    $('#' + strIdValue).droppable('enable');
  
  }
  </code></pre>
  
  <p>But this does not work.
  It seems also that I can't work with $(this) selector inside the funcOut.</p>
  
  <p>Does anyone have a hint?</p>
  
  <p>Best regards</p>
  
  <p>I use jQuery 2.1 and UI 1.10.4</p>