Ui draggable overlay
<p><strong>I need that at the back droppable container would not react if you put dragable on the one which is on the top.</strong> <a href="http://jsfiddle.net/rA4CB/161/" rel="nofollow">http://jsfiddle.net/rA4CB/161/</a> </p>

<p>Hy guys I have been working on a project for some time already and I just now sow this problem and it is realy killing whole project. I cant change structure of this so I was wondering maybe you guys know any "magic trick" to fix this issue.</p>

<pre><code>&lt;div id="draggable" class="ui-widget-content"&gt;
    &lt;p&gt;Drag me to my target&lt;/p&gt;
&lt;/div&gt;

&lt;div class="droppable" class="ui-widget-header droppable"&gt;
    &lt;p&gt;Drop here&lt;/p&gt;
&lt;/div&gt;
&lt;div class="droppable2" class="ui-widget-header droppable"&gt;
    &lt;p&gt;Drop here&lt;/p&gt;
&lt;/div&gt;
$(function() {


$("#draggable").draggable();
  $(".droppable,.droppable2").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});
</code></pre>

<p><strong>extra info:</strong> droppable and droppable2 have to work even z-index will be changed. For example droppable is on the top of droppable2 or opposite. Here you can see z-index problem with 2 droppable functions instead of one. <a href="http://jsfiddle.net/wppykb9a/2/" rel="nofollow">Link</a></p>

<p>Any help would be great !!! thanks in advance.</p>