JQueryUI Draggableでは、ドラッグ可能な要素を選択する方法を説明します。

Question

JQueryUI draggableを使用しています。複数の要素を重ねてドラッグするとドラッグ可能な要素を選択したいと考えています。

「開始」方法で何かしてください。

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

それで別の方法を考えました：

2つ以上のレイヤーをクリックすると、マウスの下にあるdivのリストが表示されます。

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

：彼は が、ここでこのアイデアのデモであるdiv要素と他より高いZインデックスがそれに与えられ、（それが今一番上だとして）あなたは簡単に移動することができます必要それが役に立てば幸い。