javascript - jquery sortable 禁用特定项目之间的拖/放

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方法。

您可以满足这两个要求:

1. 禁止将拖动的行放在 .linked-to-previous 与其之前的行之间。
2. 无法将第 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');        
    }    
});

演示: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>

演示: 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');
    }
});

演示: UPDATED FIDDLE