JQuery UI draggable helper can't be dragged onto droppable children

Question

Essentially children can be dragged onto parents, but parents can't be dragged onto children.

I wrote a simple example to demonstrate this. Three divs that are both draggable and droppable onto one another. You can drag blue onto its parents green or red and you can drag green onto its parent red. You can't drag red onto its children green or blue and you can't drag green onto its child blue.

I have a suspicion this is related to using helper. Without helper the elements would be dragged with the mouse cursor so the idea of dropping an element onto its children doesn't make sense, but with helper you're cloning the object.

How can I allow the dragging of parent elements onto children?

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/

(Also there are questions similar to dragging a helper onto itself, but this is specifically about dragging onto the children which is different. That said I'd expect a solution to allow dragging the helper onto itself also along with the children).

Answer 1

Kind of hacky way, but I think it does the job.

Instead using helper: 'clone' , I clone the element myself, to be used as the original element.

There was a visual issue, with how the dropped element snaps, so as a fast fix, I've added: revertDuration: 0

https://jsbin.com/rukijehiki/edit?html,css,js,console,output