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

我正在使用twitter引导、淘汰、淘汰排序表和jQueryUI（也是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

，因为它不起作用（

绑定“sortable”不能与虚拟元素一起使用

）。如何使用sortable实现相同的效果（最后一个选项卡是一个按钮）？但无法移动最终选项卡/按钮

答案可能不是必须添加选项卡，而是添加一个显示在选项卡末尾的元素

更新：

jsFIDLE:

可以为您完成任务，以下是更新的FIDLE:

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

更新

要在移动项目后执行某些操作，可以使用jquery ui sortable。选中此更新的提琴，在移动物品后的此提琴中，您将收到警报：

---

也许可以组装一个JSFIDLE？很好，有没有办法使用afterMove？e、 g.ko.bindingHandlers.sortable.afterMove=函数（arg）{alert（'moved one！'）；}；我试图将其添加到您的示例中，但无法。