随着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 stacked (layered) draggables

Answer 1

我认为这是很难传播的拖动或第一后单击事件（顶部）层接收所以我想到了另一种方式：

当你点击两层或多层时，它显示了鼠标下的div列表，然后你从它们中选择t他需要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); 
}); 

希望能帮助到你。