Question

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

我应该在＆＃34;开始＆＃34;方法

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

为了更简单的测试，我还粘贴了一个jsFiddle： Jquery UI stacked (layered) draggables

Answer 1

我认为在第一个（顶部）图层接收之后很难传播拖动或点击事件，所以我想到了另一种方式：

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

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

希望它有所帮助。

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

1 个答案: