将最后一个标签添加到可排序的标签列表中

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 ）。 如何使用sortable达到相同的效果（最后一个选项卡是一个按钮）？ 但是无法移动最后的标签/按钮。

答案可能不一定是添加标签，而可能是添加了出现在标签末尾的元素。

更新：

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

Answer 1

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

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

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

更新

为了在移动项目后执行某些操作，可以使用jquery ui sortable的Update事件 。 检查此更新的小提琴，在移动项目后的此小提琴中，您将收到警报：

更新小提琴