Jquery 如何将Dragable附加到新的Dropable区域？

我有3个不同的jQuery下拉菜单

$(".pages").droppable({
        accept: ".draggable"
});

拖我

如果我将我的Dragable移动到Dropable 1中，我需要能够附加/附加它在Dropable 1中创建的克隆，以便它读取

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

拖我

然而，如果我把它从droppable1的控制区域移动到droppable2的控制区域，那么它会移动到droppable2的下面，当然不会删除元素，读起来像

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
</div>

<div id="droppable2" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

拖我

下面是一个例子，我希望这是您想要的

如果您想检查（一旦删除）元素是否完全放入容器中，可以使用我的答案。注意

droppable

元素是

this

（在

drop

回调函数中）

功能设置可拖动（el、doClone）{
可拖动的({
助手：doClone？“克隆”：“原始”，
回复：真
});
}
$（“.droppable”）.droppable({
接受：“.draggable”，
drop：函数（事件、用户界面）{
clone=ui.helper.clone（）.css（{'position'：''，'top'：''，'left'：''}）；
SetDragable（克隆，错误）
$（本）
.addClass（“ui状态突出显示”）
.append（克隆）
helper.hide（）；
}
});
setDraggable（$（“.draggable”），true）
.dropable{
边框：1px纯红；
浮动：左；
左边距：10px；
}
.拖拉{
边框：1px纯绿色；
填充物：5px；
保证金：0；
}
.可拖动的p{
保证金：0；
填充：0；
}





拖我

我希望能够将项目从一个可拖放区域拖到下一个区域。因此，一旦我在第一个盒子前“拖动我”，我应该能够将它从第一个盒子移动到右边的盒子，反之亦然。我非常感谢你在这方面的帮助。我唯一不知道怎么做的最后一件事是当它被移动时（正如在原始帖子中提到的），它将实际显示在它被移动到的位置下。例如，现在如果我将其拖动到第三个框中。在HTML中，它现在列在中，但如果我将其移动到dropple2，检查时它仍然列在Dropable3中。希望这有意义。只需使用
ui.helper.remove（）而不是
ui.helper.hide（）<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>

<div id="droppable1" class="droppable" style="height: 300px; width: 300px;">
</div>

<div id="droppable2" class="droppable" style="height: 300px; width: 300px;">
<div id="draggable" class="drag-box ui-widget-content">
    <p>Drag Me</p>
  </div>
</div>