JQuery UIのドラッグ可能なヘルパーをドロップ可能な子にドラッグすることはできません

本質的に子は親にドラッグできますが、親は子にドラッグできません。JQuery UIのドラッグ可能なヘルパーをドロップ可能な子にドラッグすることはできません

私はこれを実証するための簡単な例を書いた。 3つのdivsは、ドラッグ可能であり、お互いに落ち着いています。あなたは親の緑または赤に青をドラッグすることができ、親赤に緑をドラッグすることができます。子供は緑や青に赤をドラッグすることはできませんし、青を青にドラッグすることはできません。

私はこれがヘルパーの使用に関連している疑いがあります。ヘルパーがなければ、要素はマウスカーソルでドラッグされるので、要素を子要素にドロップするという考えは理にかなっていませんが、ヘルパーでオブジェクトをクローンしています。

子要素に親要素をドラッグする方法を教えてください。

HTML：

<div class="first"> 
    <div class="second"> 
    <div class="third"></div> 
    </div> 
</div>

JS：

$('div').draggable(
{ 
    revert: true, 
    helper: 'clone', 
    appendTo: 'body', 
    refreshPositions: true 
}); 

$('div').droppable(
{ 
    greedy: true, 
    accept: 'div', 
    activeClass: 'active', 
    hoverClass: 'hover', 
    tolerance: 'pointer', 
    drop: function(event, ui) 
    { 
     alert($(this).attr('class')); 
    } 
});

CSS：

div 
{ 
    display: inline-block; 
    padding: 40px; 
} 
div.ui-draggable-dragging 
{ 
    outline: 2px solid black; 
} 
div.active 
{ 
    outline: 4px solid #0ff; 
} 
div.hover 
{ 
    background-color: #f0f; 
} 
.first 
{ 
    background-color: red; 
} 
.second 
{ 
    background-color: green; 
} 
.third 
{ 
    background-color: blue; 
    width: 50px; 
    height: 50px; 
}

https://jsfiddle.net/5dhfmmxf/3/

（またそれ自体にヘルパーをドラッグすると類似の質問があり、BUこれは具体的には異なる子供たちにドラッグすることです。それは子供たちと共にヘルパー自体を引きずることを可能にする解決策を期待している）

出典

2017-08-31 Sirisian