拖放时，jQuery droppable不会更新元素位置

Question

所以Here's a working demo。

我有一个表，然后我在这些表行之间添加了额外的行，作为用于重新排序表的删除区。应该发生的是您将表格行拖到其下方的行上，应该显示该行下方的放置区域，直到您将鼠标悬停在其下方的原始表格行上。此时，应隐藏旧的放置区域并显示新的放置区域。结果是一个表，在您拖动时似乎正在重新排序。

现在我遇到的问题是，droppable over函数似乎没有考虑到正在显示的新行。看起来它认为原始的表行仍然在它的旧位置。所以当我将行拖过它下面的行，下拉行显示，然后我拖动INTO那个下拉行时，它认为第三个表行就在那里，它显示下一个下拉行。

HTML：

<table>
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>

JS：

$(function () {
    $("table tr").each(
        function () {
            $(this).after($("<tr></tr>").append($("<td>I'm empty space</td>").prop("colspan", 3).css("background-color", "cyan")).height(30).addClass("droppable").hide());
    })
    .draggable({
        axis: "y",
        helper: function (event, ui) {
            return $("<div>HEHEHE</div>");
        },
        stop:function(){ $(".droppable").hide(); }
    })
    .droppable({
        over: function (event, ui) {
            $(".droppable").hide();
            $(event.target).next("tr").show();
        },
        tolerance:"pointer"
    });

});