拖放可交换DIV JQuery UI

Question

我一直想知道如何使用jQuery UI制作可交换DIV。

我不能使用列表，我的项目只能使用表。

现在拖放工作非常好，但是我无法在DIV和单元格之间进行交换。

我尝试了sortable（）函数，但是没有：（

感谢您的帮助。

我的CSS：

table
    {
        width: 500px;
        height: 500px;
    }

    div
    {
        width: 100px;
        height: 100px;
    }

    #first
    {
        background-color: red;
    }

    #second
    {
        background-color: blue;
    }

我的HTML：

<table border = "1">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
<div id = "first"></div>
<div id = "second"></div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    $(document).ready(function()
    {
        $("div").draggable(
        {
            revert: true
        })

        $("td").droppable(
        {
            drop: function(event, ui)
            {
                ui.draggable.position(
                {
                  of: $(this),
                  my: 'center center',
                  at: 'center center'
                });

                ui.draggable.draggable('option', 'revert', "invalid")
            }
        })
    })
</script>