JQuery拖放到iframe内部的可排序DIV中

情况是这样的：我有可拖动的元素，需要将它们连接到iframe中的可排序DIV

守则：

page.html

<div id="draggable">
    <div>a</div>
    <div>b</div>
</div>

<iframe id="iframe" src="iframe.html"></iframe>

<div id="sortable">
    <div>Element 1</div>
    <div>Element 2</div>
</div>

A.
B

iframe.html

<div id="draggable">
    <div>a</div>
    <div>b</div>
</div>

<iframe id="iframe" src="iframe.html"></iframe>

<div id="sortable">
    <div>Element 1</div>
    <div>Element 2</div>
</div>

要素1
要素2

不幸的是，我不能改变结构，我真的需要使用iframe。我试图遵循以下示例：

但目标在iFrame中是可排序的，我无法使示例适应这种情况。如果有人在JSFIDLE中有任何演示或任何可能帮助我的建议，我将不胜感激

---

检查上面的链接…我已成功拖放，但可拖放区域有一个小问题。

我已尝试此解决方案，但无法解决可拖放区域的问题：（我已经开始寻找一种不同的方法来实现这个……检查