Question

我的情况如下 - 我正在排序一个可能包含链接行的表：

<table>
    <tr class="sortable-row"><td>row 1</td></tr>
    <tr class="sortable-row"><td>row 2</td></tr>
    <tr class="linked-to-previous"><td>row 3</td></tr>
    <tr class="sortable-row"><td>row 4</td></tr>
    <tr class="sortable-row"><td>row 5</td></tr>
</table>

我需要的是禁止在.linked-to-previous和之前的行之间删除拖动的行。

我在想这可以通过以下方式完成：

jQuery('table').sortable({
    items: '.sortable-row',
    axis: 'y',
    change: function (event, ui)
    {
        return (ui.placeholder.next('.file-version').length === 0);
    }
});

但不幸的是，这并不像需要的那样 - 第1行不能拖到第3行下面，因为它会完全取消排序。

在这里小提琴：http://jsfiddle.net/qbhykh5e/3/

建议？

Answer 1

使用start和stop方法。

您可以同时满足这两个要求：

禁止在.linked-to-previous和之前的行之间删除拖动的行。
第1行无法在第3行下方拖动，因为它会完全取消排序。

代码段：

jQuery('table').sortable({
    items: '.sortable-row',
    axis: 'y',
    start: function (event, ui) {
        $(ui.item).data("startindex", ui.item.index());
    },
    stop: function (event, ui)
    {        
        var startIndex = ui.item.data("startindex");
        if ((startIndex < 2 && $(ui.item).prevAll('.linked-to-previous').length>0) || (startIndex > 2 && $(ui.item).nextAll('.linked-to-previous').length>0))
                $(this).sortable('cancel');        
    }    
});

DEMO：FIDDLE

<强>更新

注意：检查您的HTML代码段，每行都有一个额外的</td>。请将其更改为</tr>。

然后尝试以下jQuery代码片段，它符合您的要求。

jQuery('table').sortable({ items: '.sortable-row', axis: 'y', start: function(event, ui) { $(ui.item).data("startindex", ui.item.index()); $(ui.item).data("linkedindex", $(ui.item).siblings('.linked-to-previous').index()); }, stop: function(event, ui) { var startIndex = ui.item.data("startindex"), linkedIndex = ui.item.data("linkedindex"); if (startIndex > linkedIndex && $(ui.item).nextAll('.linked-to-previous').length > 0) $(this).sortable('cancel'); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <table> <tr class="sortable-row"> <td>row 1</td> </tr> <tr class="sortable-row"> <td>row 2</td> </tr> <tr class="linked-to-previous"> <td>row 3</td> </tr> <tr class="sortable-row"> <td>row 4</td> </tr> <tr class="sortable-row"> <td>row 5</td> </tr> </table>

DEMO： FIDDLE

最新更新：

只需尝试此代码段

jQuery('table').sortable({ items: '.sortable-row', axis: 'y', stop: function (event, ui) { if ($(ui.item).next('.linked-to-previous').length > 0) $(this).sortable('cancel'); } });

DEMO： UPDATED FIDDLE

jquery sortable禁用特定项之间的拖放

1 个答案: