Javascript Jquery：将一个可拖动的div从后续父级拖放到另一个div

我如何才能将一个可拖动的div拖放或连接到另一个div，该div特别位于后续父级？代码如下所示，但不幸的是它不起作用。当我将项目拖动到其指定位置时，它将恢复到其原始位置。请帮忙，谢谢

HTML

---

检查下面，它正在工作。您应该为拖放添加jqueryui
并为要拖动的div指定一些宽度和高度。因此，它将正确显示

$（'.item'）。可拖动({
光标：“指针”，
捕捉：“#包装器”，
遏制：document.body，
还原：“无效”，
卷轴：错，
附录：document.body
});
$（'#wrapper2'）。可拖放({
接受：'.item'，
drop：函数（e、ui）{
$（this.append（ui.draggable.css（'position'，'static'）；
}
});
.item{
宽度：50px；
高度：50px；
}

项目清单

<table align="center">
<tr>
    <td>
        <h1>List of Items</h1>
    </td>
</tr>
<tr>
    <td>
        <div>
            <table border="1">
                <tr>
                    <td id="wrapper" >
                        <div class="item" style="border:1px solid black;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
    <td>
        <div>
            <table>
                <tr>
                    <td>
                        <div id="wrapper2" style="width: 100px; height: 100px; border:1px solid black;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

$('.item').draggable({
    cursor: 'pointer',
    snap: '#wrapper',
    containment: document.body,
    revert: 'invalid',
    scroll: false,
    appendTo: document.body
});

$('#wrapper2').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});