С jQueryUI перетаскиваемый, как выбрать перетаскиваемый элемент, когда перетаскиваемые слоистые

Я использую перетаскиваемый JQueryUI и хотел бы выбрать, какой перетаскиваемый элемент перетаскивается, когда несколько сложены друг на друга (один поверх другого).

Должен ли я сделать что-то в рамках метода «start»?

$( ".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 штабелированные (слоистые) перетаскиваемые

1 ответ

  1. Я думаю, что трудно распространять событие перетаскивания или щелчка после получения первого (сверху) слоя, поэтому я подумал о другом способе:

    при нажатии на два или более слоев он показывает список divs под мышью, то вы выбираете из них необходимый 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);
    });
    

    надеюсь, это поможет.