Databases
StackOverflow2013
Postsdbo
POJquery .out() remove droppable class only if all draggables are removed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery .out() remove droppable class only if all draggables are removed
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload