jQuery droppable не обновляет местоположение элемента при перетаскивании

Question

Итак, вот рабочая демоверсия.

У меня есть таблица, затем я помещаю дополнительные строки между этими строками таблицы, чтобы они выполняли роль зон перетаскивания для переупорядочения таблицы. Что должно произойти, так это то, что вы перетаскиваете строку таблицы над строкой под ней, зона перетаскивания под этой строкой должна отображаться, пока вы не наведете курсор мыши на исходную строку таблицы под ней. В этот момент старая зона сброса должна быть скрыта, а новая зона сброса показана. Результатом является таблица, которая, кажется, переупорядочивается при перетаскивании.

Теперь проблема, с которой я столкнулся, заключается в том, что функция 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"
    });

});