JQuery UI sürüklenebilir bir yardımcının sürüklenebilir çocuklara sürüklenemiyor

Question

Temelde çocuklar ebeveynlere sürüklenebilir, ancak ebeveynler çocuklara sürüklenemez.

Bunu göstermek için basit bir örnek yazdım. Birbirine sürüklenebilen ve yere sürülebilen üç div. Maviyi ebeveynlerinin üzerine yeşil veya kırmızıya sürükleyebilir ve ana kırmızı üzerine yeşil sürükleyebilirsiniz. Çocuğunun yeşil veya mavi üzerine kırmızı çizemezsiniz ve çocuk mavisi üzerine yeşil sürükleyemezsiniz.

Bunun yardımcının kullanımıyla ilgili bir şüphem var. Yardımcı olmadan, elemanlar fare imleci ile sürüklenecek, böylece bir öğeyi çocuklarına bırakma fikri mantıklı değil, ama yardımcıyla nesneyi klonlıyorsunuz.

Ebeveyn öğelerinin çocuklara sürüklenmesine nasıl izin verebilirim?

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/

(Ayrıca kendi üzerine yardımcı sürükleyerek benzer sorular vardır, bu Bu, özellikle farklı olan çocuklara sürüklenmekle ilgilidir. Bu, yardımcının kendisiyle birlikte çocuklarla birlikte sürüklenmesine izin verecek bir çözüm bekleyeceğimi söyledi).

Answer 1

Bu harikulade bir yol, ama bence bu iş yapıyor.

helper: 'clone' yerine, orijinal öğe olarak kullanılacak öğeyi kendim klonladım.

düştü eleman böylece hızlı bir düzeltme olarak, çıtçıtlı nasıl bir görsel sorun vardı, ben ekledim: revertDuration: 0

https://codepen.io/anon/pen/GvbZdy