Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The greedy options is just for nested elements that have a droppable parent.</p> <p>In your code the 2 droppable elements are siblings so the greedy option will not work:</p> <pre><code>&lt;div id="droppable3" class="ui-widget-header"&gt; &lt;p&gt;Outer droppable&lt;/p&gt; &lt;/div&gt; &lt;div id="droppable3-inner" class="ui-widget-header"&gt; &lt;p&gt;Inner droppable (greedy)&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Here is a messy workaround if you still want to use siblings instead of parents and children.</p> <p>Live code <a href="http://jsfiddle.net/nameIsNull/FgUYm/" rel="nofollow">example</a>.</p> <pre><code>function normalDraggedOver() { $( this ).addClass( "ui-state-highlight" ) .find( "&gt; p" ) .html( "Droppeeeed!" ); } var options = { activeClass: "ui-state-hover", hoverClass: "ui-state-active", greedy: true, drop: normalDraggedOver }; var options2 = { activeClass: "ui-state-hover", hoverClass: "ui-state-active", disabledClass: "ui-state-disabled", hoverStateClass: "ui-state-hover", greedy: true, greedyWithSibligs: true, drop: normalDraggedOver, over: function () { /* if we have previous siblings of the inner element we handle them as parents */ if(options2.greedyWithSibligs &amp;&amp; $(this).prev().length &gt; 0) { $(this).siblings().slice(0, $(this).index()) .removeClass(options2.hoverClass) .droppable('disable') .removeClass(options2.disabledClass) .removeClass(options2.hoverStateClass); } }, out: function () { /* all the siblings of the inner element that were handled as parents act as one*/ if(options2.greedyWithSibligs &amp;&amp; $(this).prev().length &gt; 0) { $(this).siblings().slice(0, $(this).index()) .droppable('enable') .addClass(options2.hoverClass); console.log($(this).attr('id')); } } }; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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