将最后一个选项卡添加到可排序的选项卡式列表答案

【问题标题】：Add one last tab to a sortable tabbed list将最后一个选项卡添加到可排序的选项卡式列表
【发布时间】：2013-03-21 23:39:09
【问题描述】：

我正在使用 twitter bootstrap、knout、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/

【问题讨论】：

【解决方案1】：

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

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

更新

为了在移动项目后做一些事情，你可以使用 jquery ui sortable 的Update event。检查这个更新的小提琴，在移动项目后在这个小提琴中你会得到警报：

【讨论】：

很好，有没有使用 afterMove 的方法？例如ko.bindingHandlers.sortable.afterMove = function(arg) { alert('移了一个！'); };我试图将它添加到您的示例中，但不能。