Add one last tab to a sortable tabbed list

Question

I'm using twitter bootstrap, knockout, knockout-sortable, and JQuery UI (also haml but it's inconsequential to the question). I display a tabbed list like the following. It adds a final tab with a button inside.

%ul.nav.nav-tabs
  /ko foreach: pages
  %li
    %span{ "data-bind" => "text: name()" }
  / /ko
  %li
    %button.btn
      %i.icon-plus

I'm trying to make the tabs sortable (via dragging) but I'm running into problems with the button:

%ul.nav.nav-tabs{ "data-bind" => "sortable: pages" }
  %li
    %span{ "data-bind" => "text: name()" }
  /%li
  /  %button.btn
  /    %i.icon-plus

I can't use /ko sortable: pages because it doesn't work (The binding 'sortable' cannot be used with virtual elements). How can I achieve the same effect (last tab being a button) with sortable? Can't move the final tab/button though.

The answer may not have to be adding a tab, it could be adding an element that appears at the end of the tabs.

Update:

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

Answer 1

Custom binding can do the job for you, here is the updated fiddle :

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

For excluding any particular li element from sortable element you can use items option of jquery ui sortable plugin, it accepts jquery selectors.

Update

For doing something after moving item you can use Update event of jquery ui sortable. Check this updated fiddle, in this fiddle after moving item you will get the alert :

Updated Fiddle