title: Ui draggable overlay
body: <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>