使用JQueryUI Draggable，如何在可拖动对象分层时选择可拖动元素

Question

我正在使用JQueryUI可拖动的元素，并希望选择在多个元素相互堆叠（一个在另一个之上）时拖动哪个可拖动元素。

我应该在"开始"方法中做一些事情吗？

$( ".draggable" ).draggable({
  start: function(event, ui) {
    // Is there a way I can select to drag #e2:
    // so I can use program logic to select which draggable I want to get dragged
  }
});

.draggable {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="draggable" id="e1" style="background-color: red">1</div>
<div class="draggable" id="e2" style="background-color: green">2</div>
<div class="draggable" id="e3" style="background-color: blue">3</div>

我还粘贴了一个 jsFiddle 以简化测试：Jquery UI 堆叠（分层）可拖动对象

Answer 1

我认为在第

一层（顶部）收到拖动或单击事件后很难传播它，所以我想到了另一种方法：

当您单击两个或多个图层时，它会在鼠标下方显示一个div 列表，然后您可以从中选择所需的div 和一个高于其他图层的 z 索引，您可以轻松移动它（因为它现在在顶部）这是这个想法的演示：

http://jsfiddle.net/axzg0oqz/1/

$('.draggable').draggable().click(function(e) {
  var point = {
    x: e.pageX,
    y: e.pageY
  };
  var all = $($(this).parent().children());
  var selected = [];
  for (var i = 0; i < all.length - 1; i++) {
    if (included(point, all[i])) {
      selected.push(all[i]);
    }
  }
  if (selected.length > 1)
    createList(selected, point);
});

希望对您有所帮助。