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/

Answer 1

Custom binding可以为你完成这项工作，这是更新的小提琴：

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

<强>更新

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