如何在jQuery中连接“可拖动”和“可排序”？

我试图弄清楚如何在jQuery中将draggable连接到sortable。我还希望拖动的div捕捉到其他div。下面是我希望jQuery执行的一个示例：

<div id="yes">Drag me and you'll be able to drop divs into me.</div>
<div id="no">Drag me but you won't be able to drop divs into me.</div>
<div id="main">

</div>

拖动id为yes的div后，代码如下：

<div id="yes">Drag me and you'll be able to drop divs into me.</div>
<div id="no">Drag me but you won't be able to drop divs into me.</div>
<div id="main">
     <div id="d1" class="droppable"></div>
</div>

现在，如果要拖动其中一个div，则只有从id为yes的div中拖动div，被拖动的div才能进入每个div，并添加droppable类this class

下面是一个示例，说明了我希望在多次拖动后代码的外观：

<div id="yes">Drag me and you'll be able to drop divs into me.</div>
<div id="no">Drag me but you won't be able to drop divs into me.</div>
<div id="main">
     <div id="d1" class="droppable">
          <div id="d2" class="droppable"><div id="d6"></div></div>
     </div>
     <div id="d3" style="margin-top: 11px"></div>
     <div id="d4" style="margin-top: 34px;margin-right: 39px"></div>
     <div id="d5" class="droppable"></div>
     </div>
</div>

当然，这只是一个示例，说明了代码在经过大量拖动后是如何处理的。 只能将div放入主div中。也可以在放入后拖动div。带边距的样式取决于放置div的位置-如果它正好位于父div的边界上，则不会有样式。如果你把它放在盒子的中间，边缘将是div的位置。

总之，我希望如果您从id为“是”的div中拖动一个div，该div将能够有一个子div，但是正在从id为“否”的div中拖动该div，该div将永远不会是父div，并且两个div将在拖动时捕捉到其他div。如果div被放置在div的顶部，但不在其内部的边界上，则他将被捕捉，但决不会停留在div的顶部。div的样式将使用边距，而不是位置：绝对

---

对不起，我的英语不好&谢谢

像这样的@严峻的谢谢，但事实并非如此，我唯一想问的是，有一个div可以从那里拖动。我要求我能在任何我想要的地方放一个div：在页面的中间，在顶部，甚至在其他页面的内部。