JQuery UI 可拖动助手不能被拖动到可放置的孩子上

Question

基本上孩子可以拖到父母身上，但父母不能拖到孩子身上。

我写了一个简单的例子来证明这一点。三个可拖放的 div。您可以将蓝色拖到其父级绿色或红色上，也可以将绿色拖到其父级红色上。您不能将红色拖到其子绿色或蓝色上，也不能将绿色拖到其子蓝色上。

我怀疑这与使用助手有关。如果没有 helper，元素将被鼠标光标拖动，因此将元素拖放到其子元素上的想法没有意义，但使用 helper，您正在克隆对象。

如何允许将父元素拖到子元素上？

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/

（也有类似于将助手拖到自身上的问题，但这是专门关于拖到不同的孩子身上的。也就是说，我希望有一个解决方案允许将助手和孩子一起拖到自己身上） .

Answer 1

有点老套，但我认为它可以完成工作。

我使用helper: 'clone' 自己克隆了该元素，以用作原始元素。

有一个视觉问题，与拖放元素的对齐方式有关，因此作为快速修复，我添加了：revertDuration: 0

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