Question

我有两个div源（包含拖动元素）和目标（用于删除拖动内容的空间）。我已经设置并将具有四列的行追加到目标div中以进行可投放。您可以在http://jsfiddle.net/yLhvxv0d/5/中找到示例代码。所有人都在考虑拖放工作。但是我的问题是什么＆＃34;当我将内容拖到目标div的子项时，拖动的内容会附加到从父项到选定子目标的整个树＆＃34;，所以请帮助我

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

掉落事件发生3次。对于2个父母和一个孩子（所有人都有班级＆＃34;可拖动＆＃34;）。向子项添加一个类，并检查drop元素是否具有正确的类：

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/

Jquery UI拖放 - 如何将拖动的内容拖放到父元素

1 个答案: