title: Jquery .out() remove droppable class only if all draggables are removed
body: <p>I have 4 draggable options and 3 droppable buckets.  When I drag an option to a droppable, the draggable takes on the value of the bucket.  The droppable also takes on the class '.dropped'.  2 things I need:</p>
  
  <ol>
  <li>When the draggable is removed from the bucket it looses the value</li>
  <li>When all draggables are removed from a droppable, it looses the '.dropped' class</li>
  </ol>
  
  <p>The problem I'm having is that the ui param in .out(event,ui) is empty (per <a href="http://api.jqueryui.com/droppable/#event-out" rel="nofollow">http://api.jqueryui.com/droppable/#event-out</a>) so I can't really grab any info from it to update the draggable value or count the number of draggables inside the droppable.</p>
  
  <p>I've considered using a counter but there are 3 different droppables.  Any advice?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div class="drag-option span1 draggable" id="option1"&gt;Option 1&lt;/div&gt;
      &lt;div class="span2"&gt;&lt;/div&gt;
      &lt;div class="drag-option span1 draggable" id="option2"&gt;Option 2&lt;/div&gt;
      &lt;div class="span2"&gt;&lt;/div&gt;
      &lt;div class="drag-option span1 draggable" id="option3"&gt;Option 3&lt;/div&gt;
      &lt;div class="span2"&gt;&lt;/div&gt;
      &lt;div class="drag-option span1 draggable" id="option4"&gt;Option 4&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row-fluid"&gt;
      &lt;div class="drop-option droppable span4" value="1"&gt;1&lt;/div&gt;
      &lt;div class="drop-option droppable span4" value="2"&gt;2&lt;/div&gt;
      &lt;div class="drop-option droppable span4" value="3"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong> </p>
  
  <pre><code>// Drag Drop functions
  $('.draggable').draggable({containment: "#drag-radio"}).css('cursor','move');
  $('.droppable').droppable({
      accept: ".drag-option",
      hoverClass: "drop-hover",
      // Make the drag option inherit the drop value
      drop: function(event,ui){
          ui.draggable.attr('value',$(this).attr('value'));
          $(this).addClass('dropped');
  
      },
      // Remove draggable value and droppable .dropped class
      out: function(event,ui){
          ui.draggable.attr('value','');
          $(this).removeClass('dropped');
      }
  });
  </code></pre>