JQuery UI可拖动帮助程序无法拖动到可放置的子项上

Question

基本上儿童可以被拖到父母身上,但父母不能被拖到孩子身上.

我写了一个简单的例子来证明这一点.三个div都是可拖动的,可以相互拖放.您可以将蓝色拖到其父项绿色或红色上,然后将绿色拖到其父红色上.您不能将红色拖到绿色或蓝色的子项上,也不能将绿色拖到其子蓝色上.

我怀疑这与使用帮助有关.没有帮助器,元素将被鼠标光标拖动,因此将元素放到其子元素上的想法没有意义,但是有了帮助器,你就克隆了对象.

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

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

有点hacky方式,但我认为它做的工作.

而是使用helper: 'clone',我自己克隆元素,用作原始元素.

有一个视觉问题,丢弃的元素是如何捕捉的,所以作为快速修复,我添加了: revertDuration: 0

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