jQuery UI从可排序到自由拖动

我对jQueryUI非常陌生。 我需要有一个列表可排序，从中我可以将元素拖动到另一个div。在该div中，元素需要有一个特定的宽度和高度。还需要限制元素在div或列表中拖动。我试过几种方法，但我还是弄不明白

这就是我尝试过的：

我目前拥有的代码如下： js：

HTML：

<table>
    <tr>
        <td>
            <ul id="available">
                <li style="width: 45px; height: 20px; background: #a0d3e8; border: 1px solid #74bfdd;"><a href="#">Test</a></li>
            </ul>
        </td>

        <td>
            <div id="used" style="width: 400px; height: 500px; border:1px solid #222;"></div>
        </td>
    </tr>
</table>

我知道我可以通过以下方式限制div在div内的移动： 包容：父 我之所以使用内联CSS，是因为宽度和高度的值是可变的

我的问题如下。当列表中的元素被拖动到div时，它将作为列表项而不是div添加。同时，宽度和高度也将完全消失

---

我希望有人能帮助我。提前谢谢。

这就是我想到的

$(function() {
    $('#available').sortable();
    $('#available').disableSelection();

    $('.draggable').draggable({ containment: '#used' });
});

---

无论您的新lis来自何处，它都不是来自发布的代码。至于样式属性，它们不在那里，因为您没有复制它们。这正是你所期望的：我之所以只加了一个li，是因为它与问题无关。在小提琴中，您演示了如何在css上进行复制，谢谢。但是你没有展示如何在部门中移动。你能更详细地描述一下你的期望吗？在小提琴中，一个li被拖动，并被一个div替换为drop，这正是问题所要问的。但是前面的评论让我觉得你可能想要别的东西？@blgt是的，事实上我想要更多。我已经做了更多的工作，更接近我想要的东西。在小提琴：有一个更新版本的我的javascript。我几乎得到了我想要的。还应该可以将li元素拖回列表。

$(function() {
    $('#available').sortable();
    $('#available').disableSelection();

    $('.draggable').draggable({ containment: '#used' });
});