Jquery 如何拖动包含已拖动到其中的其他div的div？

我正试图解决一个问题，但我自己却没有多少运气来解决它

我的页面上有几个容器div。“ItemContainer”保存可拖动的“items”。“MainHome”包含一个辅助“ItemContainer”（将“items”拖到其中）以及一些其他div。“主住宅”也可以拖进“游乐区”。我需要做的是，当“items”被拖到“MainHome”中包含的“ItemContainer”中时，它们需要被附加到“MainHome”中，这样，如果“MainHome”随后被拖，那么这些项就会随之拖走

它们还需要保持单独拖动

以下是我的通用代码：

<div id="leftrail">
    <div id="manager">
        <div id="somediv">
            <h2>Text</h2>
            <div id="bubble">Text Here</div>
        </div>
        <div>
            <div id="ItemContainer">
                <div id="Item1">Item 1</div>
                <div id="Item2">Item 2</div>
                <div id="Item3">Item 3</div>
                <div id="Item4">Item 4</div>
                <div id="Item5">Item 5</div>
            </div>
        </div>
    </div>
    <h2>Section Title</h2>
    <div>
        <div id="MyContainer">
            <div id="SecondaryItemContainer">Drag Items Here</div>
            <div>Some text</div>
            <div>Some more text</div>
        </div>
    </div>
</div>

<div id="MainContent">    
    <div>Some stuff here</div>    
    <div>Some stuff here</div>      
    <div>Some stuff here</div>    
    <div id="BigContainer">Drag the MyContainer Here</div>      
</div>

正文
此处文本
项目1
项目2
项目3
项目4
项目5
章节标题
将项目拖到此处
一些文本
更多的文字
这里有些东西
这里有些东西
这里有些东西
将MyContainer拖到这里

完整演示如下：

下面是一个嵌套的可排序解决方案：

下面是对上述解决方案中序列化处理方式的改进：

另一个解决方案：

下面是这个问题的重复部分：

---

到目前为止你试过什么？通常，您应该在DOM中重新定位它们。。将元素放入新容器中（就DOM而言，而不仅仅是css定位而言）将产生您想要的结果..帮助我们帮助您！创建一个JSFIDLE！Gaby-我不知道你所说的在DOM中定位是什么意思（我的大部分工作是服务器端的，所以不太熟悉客户端脚本）。你的意思是使用append/prepend吗？Aktee-我添加了JSFIDLE演示链接。感谢您提供的大量资源。如果我想到“嵌套”这个词，我肯定我会找到这些，但我的大脑太兴奋了，弄不清楚该怎么称呼它；o） 不用担心。我非常清楚那种感觉。很高兴我能帮忙。嗯，再想想，这些不是我想要的。我需要将物品从一个支架移动到另一个支架。我没有用UL列表来做这个。我想这可以通过jQueryUI中可用的选项来实现。我建议您使用sortable interaction（）。您能看看我现在在原始问题中发布的JSFIDLE链接吗？