Trình trợ giúp có thể kéo JQuery UI không thể kéo vào các trẻ có thể phân tách

Question

Trẻ em có thể bị kéo vào cha mẹ, nhưng cha mẹ không thể bị kéo vào trẻ em.

Tôi đã viết một ví dụ đơn giản để chứng minh điều này. Ba divs đều có thể kéo và có thể phân tách lên nhau. Bạn có thể kéo màu xanh lên bố mẹ màu xanh lá cây hoặc màu đỏ và bạn có thể kéo màu xanh lên màu đỏ của bố mẹ. Bạn không thể kéo màu đỏ vào con của mình màu xanh lá cây hoặc màu xanh và bạn không thể kéo màu xanh lá cây lên con của nó màu xanh.

Tôi nghi ngờ điều này liên quan đến việc sử dụng trình trợ giúp. Nếu không có helper thì các phần tử sẽ được kéo bằng con trỏ chuột để ý tưởng thả một phần tử vào các con của nó không có ý nghĩa, nhưng với helper bạn nhân bản đối tượng.

Làm cách nào để có thể cho phép kéo phần tử gốc vào con?

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/

(Cũng có những câu hỏi tương tự như kéo một helper vào chính nó, bu Điều này đặc biệt về việc kéo vào các trẻ em khác nhau. Điều đó nói rằng tôi mong đợi một giải pháp để cho phép kéo helper lên chính nó cũng cùng với các trẻ em).

Answer 1

Loại cách hacky, nhưng tôi nghĩ nó thực hiện công việc.

Thay vì sử dụng helper: 'clone', tôi sao chép chính yếu tố đó, được sử dụng làm yếu tố gốc.

Có một vấn đề thị giác, với thế yếu tố giảm snaps, như vậy là một sửa chữa nhanh chóng, tôi đã thêm: revertDuration: 0

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