Question

我有这个设置。 JSFiddle链接。

＆＃13;

$('.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);
    }
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="container">
  <div class="first-sortable"></div>
  <div class="second-sortable"></div>
</div>


<div class="item"></div>

<div class="logger1">Blue Sortable Receive</div>
<div class="logger2">Dark Sortable Receive</div>

＆＃13;

主要思想是，正如您所看到的那样，深色排序是在第一个之上，它是使用position: absolute和z-index定位的。我对黑色的有一点不透明度，所以我可以看看第一个可排序的东西会发生什么。

在底部红色方块下方，我们有两个指示符，显示在特定可排序时触发receive事件的时间。

请注意，当您将项目拖放到蓝色可排序时，只会触发此可排序项的指示符。当我将新项目放到黑色上时，会在两个可排序的项目上触发接收事件。

这种行为是理想的吗？我想，在这种情况下，只有黑暗的人必须接受这个事件。

我想知道这不是jQuery UI bug。 Ticket

使用z-index堆叠的两个可排序的

0 个答案: