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

希望能幫助到你。