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，因为它不起作用（The binding 'sortable' cannot be used with virtual elements）。如何使用可排序实现相同的效果（最后一个选项卡是按钮）？虽然无法移动最后一个选项卡/按钮。

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

更新：

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

score 1 · Accepted Answer

自定义绑定可以为您完成这项工作，这是更新后的小提琴：

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

更新

为了在移动项目后做某事，您可以使用可排序的 jquery ui 的更新事件。检查这个更新的小提琴，在移动项目后在这个小提琴中你会得到警报：

1 回答 1