jquery - 将最后一个选项卡添加到可排序的选项卡式列表中

Question

我正在使用 twitter bootstrap、knockout、knockout-sortable 和 JQuery UI(也是 haml，但它对问题无关紧要)。我显示如下所示的选项卡式列表。它添加了一个最终选项卡，里面有一个按钮。

%ul.nav.nav-tabs
  /ko foreach: pages
  %li
    %span{ "data-bind" => "text: name()" }
  / /ko
  %li
    %button.btn
      %i.icon-plus

我正在尝试使选项卡可排序(通过拖动)，但我遇到了按钮问题:

%ul.nav.nav-tabs{ "data-bind" => "sortable: pages" }
  %li
    %span{ "data-bind" => "text: name()" }
  /%li
  /  %button.btn
  /    %i.icon-plus

我无法使用/ko sortable:pages，因为它不起作用(绑定(bind)“sortable”不能与虚拟元素一起使用)。如何使用可排序达到相同的效果(最后一个选项卡是一个按钮)？但无法移动最后一个选项卡/按钮。

答案可能不一定是添加一个选项卡，它可能是添加一个出现在选项卡末尾的元素。

更新:

JSFiddle:http://jsfiddle.net/pbNvz/6/

Answer 1

Custom binding可以为您完成这项工作，这是更新的 fiddle :

http://jsbin.com/edopuh/3/edit

要从可排序元素中排除任何特定的 li 元素，您可以使用 items jquery ui 可排序插件的选项，它接受 jquery 选择器。

更新

要在移动项目后执行某些操作，您可以使用 Update event jquery ui 的可排序。检查这个更新的 fiddle ，在移动项目后，在这个 fiddle 中您将收到警报:

Updated Fiddle