jQuery droppable不'；t拖动时更新元素位置

所以

我有一个表，然后我在这些表行之间放置额外的行，作为放置区来重新排列表。应该发生的是，您将表格行拖到它下面的行上，该行下面的放置区域应该显示出来，直到您将鼠标移到该行下面的原始表格行上。此时，应隐藏旧的放置区域，并显示新的放置区域。结果是，在拖动时，一个表似乎正在重新排序

现在我遇到的问题是，droppable over函数似乎没有考虑正在显示的新行。它似乎认为原始表行仍在原来的位置。因此，当我将行拖动到它下面的行上时，会出现拖放行，然后当我拖动到该拖放行时，它认为第三个表行在那里，并显示下一个拖放行

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:

$（函数（）{
$（“表tr”）。各(
函数（）{
$（此）.after（$（“”）.append（$（$）.prop（“colspan”，3）.css（“背景色”，“青色”））.height（30）.addClass（“droppable”）.hide（）；
})
.拖拉({
轴：“y”，
助手：函数（事件、用户界面）{
返回美元（“呵呵”）；
},
停止：函数（）{$（“.droppable”）.hide（）；}
})
.dropable({
结束：功能（事件、用户界面）{
$（“.droppable”）.hide（）；
$（event.target）.next（“tr”）.show（）；
},
公差：“指针”
});
});

当你的小提琴。。为什么不使用sortable。。或者你有更多的桌子可以在它们之间拖放？@Mohamed Yousef谢谢！最后我用了那个。但这更多的是一种变通，而不是修复。它花了几个小时才开始工作，而这个问题本应该更容易解决。是的，这需要一段时间，但你会得到你想要的。。但是相信我，如果你试图在可拖动和可放下的环境下工作，你会不断地尝试，但你将一无所获。。祝你好运：）

$(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"
    });

});