Jquery UI拖放-如何将拖动的内容拖放到父元素的选定目标（子）中[重复]

Question

我有两个 div 源（包含拖动元素）和目标（放置拖动内容的空间）。我已将具有四列的行设置并附加到目标 div 中以进行放置。您可以在 http://jsfiddle.net/yLhvxv0d/5/ 中找到示例代码。鉴于拖放，所有这些都在工作。但我的问题是“当我将内容拖到目标 div 的子项中时，拖动的内容会附加到从父项到选定子目标的整个树”，所以请帮助我

1）如何将内容拖放到选定的子元素中，而不是拖放到其父元素中

在我的代码下面找到：

<div>
 <p class="draggable" name="name">Name</p>
 <p class="draggable" name="Gender">Gender</p>
 <p class="draggable" name="Address">Address</p>
</div>
<div class="droppable mytable">
<div class="droppable row mytable">
<div class="droppable col-sm-3 mytable">
  </div>
<div class="droppable col-sm-3 mytable">
</div>
<div class="droppable col-sm-3 mytable">
</div>
<div class="droppable col-sm-3 mytable">
</div>
</div>
</div>

<script>
$(".draggable").draggable({
  helper: "clone"
});

$('.droppable').droppable({
  accept: '.draggable',
  drop: function(e, ui) {
    $(ui.draggable).clone().appendTo($(this));
  }
});
</script>

从this JSFiddle找到可执行代码

已编辑：

我想根据选择拖放父元素和子元素。这些子元素会根据用户输入动态附加到父 div。假设例如用户想要将元素拖放到父 div 中，它必须拖放到父 div 中，并且如果用户想要将拖动的元素拖放到子节点中，它只能拖放到子节点中。我想你们理解我的要求。这个问题和你提到的问题完全不同

Answer 1

drop 事件触发 3 次。对于 2 个父母和一个孩子（都有“可拖动”类）。为孩子添加一个类，并检查放置元素是否具有正确的类：

HTML：

<div>
  <p class="draggable" name="name">Name</p>
  <p class="draggable" name="Gender">Gender</p>
  <p class="draggable" name="Address">Address</p>
</div>
<div class="droppable mytable">
  <div class="droppable row mytable">
    <div class="droppable col-sm-3 mytable children">

    </div>
    <div class="droppable col-sm-3 mytable children">

    </div>
    <div class="droppable col-sm-3 mytable children">

    </div>
    <div class="droppable col-sm-3 mytable children">

    </div>
  </div>
</div>

掉落事件：

 if ($(this).hasClass('children')) {
    $(ui.draggable).clone().appendTo($(this));
 }

http://jsfiddle.net/yLhvxv0d/8/