Question

我有一个使用选项初始化的可排序视频列表：

items: '.videoBox:not(.isFirst, .isLast)',

第一个和最后一个视频不可排序，也不以任何方式拖动 - 这太棒了！

使用connectToSortable选项将其连接到另一个可拖动的视频列表。我希望能够在isLast和isFirst视频之间拖动一些视频（其中有许多视频），所以对于那些我需要再次排序这些项目的视频，我使用：

start: function(event, ui) {
  if (// my test //)
  {
      $('#timeline').sortable('option', 'items', '.videoBox');
  }
},

这允许我拖放以前无法排序的项目 - 太棒了！

现在我想在拖动完成后将sortable恢复为初始设置，所以我把它放在可拖动的init中：

stop: function() {
  if (// my test //)
  {
    $('#timeline').sortable('option', 'items', '.videoBox:not(.isFirst, .isLast)');
    $('#timeline').sortable('refresh');
    $('#timeline .videoBox.isLast, #timeline .videoBox.isFirst').draggable('destroy');
  }
},

如果draggable没有放入#timeline，这很有效。但是，如果将其放入#timeline，则似乎不会调用此回调（？）。我已将完全相同的代码添加到可排序的事件中：stop，update和deactivate，虽然我可以看到这些回调被触发，isFirst和{ {1}}视频仍然可以拖动。

然而，它们不是可排序的 - 所以我认为问题出在isLast位...任何想法/建议？

干杯，汤姆

Answer 1

我无法修复甚至找出上述问题的原因。然而，我找到了一个似乎相当强大的解决方法。

在stop初始化的sortable回调中：

stop: function() {
    $('#timeline').sortable('option', 'items', '.videoBox:not(.isFirst, .isLast)');
    opts = $('#timeline').sortable('option');
    $('#timeline').sortable('destroy');
    $('#timeline').sortable(opts);
}

第一行设置了items选项，就像我以前一样。然后我将sortable init选项保存到变量中，销毁sortable行为并使用正确的选项重新初始化它。这就是我现在想要的 - 我摧毁了isFirst和isLast项目上的拖拽。我完全按照上面stop回调的方式离开了draggable回调，这是当拖动不会超过可排序时的情况所需的。

看起来像是一个大锤的方法，但努力找到一个更好的方法。有兴趣知道是否有人有任何其他建议。

汤姆

jQuery Draggable + Sortable - 如何更改可排序项？

1 个答案: