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

时间:2015-11-20 22:03:21

标签: jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable

所以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"
    });

});

0 个答案:

没有答案