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

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

1 个答案: