Two sortables stacked using z-index
<p>I have this setup. <a href="https://jsfiddle.net/andreiglingeanu/acnvzvbj/2/" rel="nofollow">JSFiddle</a> link.
<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.item').draggable({
 helper: 'clone',
 connectToSortable: '.first-sortable, .second-sortable',
});

$('.first-sortable').sortable({
 connectWith: '.second-sortable',
  receive: function () {
    $('.logger1').addClass('animated');
    setTimeout(function () {
        $('.logger1').removeClass('animated');
    }, 300);
  }
});

$('.second-sortable').sortable({
  connectWith: '.first-sortable',
    receive: function () {
      $('.logger2').addClass('animated');
      setTimeout(function () {
          $('.logger2').removeClass('animated');
      }, 300);
    }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
  width: 50px;
  height: 50px;
  background: red;
  display: inline-block;
  margin-right: 5px;
}

.container {
  position: relative;
  margin-bottom: 20px;
}

.first-sortable {
  height: 100px;
  background: blue;
}

.second-sortable {
  position: absolute;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  background: rgba(3, 3, 3, .8);
  z-index: 10;
  padding-left: 20px;
}

.logger2,
.logger1 {
  transition: all .3s color;
}

.animated {
  color: blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;

&lt;div class="container"&gt;
  &lt;div class="first-sortable"&gt;&lt;/div&gt;
  &lt;div class="second-sortable"&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;div class="item"&gt;&lt;/div&gt;

&lt;div class="logger1"&gt;Blue Sortable Receive&lt;/div&gt;
&lt;div class="logger2"&gt;Dark Sortable Receive&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The main idea is that, as you can see, is that the dark sortable is above the first one, it is positioned using <code>position: absolute</code> and <code>z-index</code>. I have a little bit of opacity for the black one, just so I can look what happens with the first sortable.</p>

<p>Below the bottom red square we have two indicators that shows when <a href="http://api.jqueryui.com/sortable/#event-receive" rel="nofollow">receive</a> event is fired on the specific sortable.</p>

<p>Please note the fact that when you drop an item onto the blue sortable, only indicator for this sortable is fired. When I drop a new item onto the black a receive event is fired on both sortables.</p>

<p>Is this behavior a desired one? I think, in this case just the dark one have to receive this event.</p>

<p>I wonder if this is not jQuery UI bug. <a href="https://bugs.jqueryui.com/ticket/14913" rel="nofollow">Ticket</a>.</p>