jquery - teclado - Agregue una última pestaña a una lista con pestañas ordenables

pestañas cerradas recientemente chrome

Question

Estoy usando twitter bootstrap, knockout, knockout-sortable, y JQuery UI (también haml pero no tiene importancia para la pregunta). Muestro una lista con pestañas como la siguiente. Agrega una pestaña final con un botón dentro.

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

Estoy tratando de ordenar las pestañas (mediante el arrastre) pero estoy teniendo problemas con el botón:

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

No puedo usar /ko sortable: pages porque no funciona ( The binding ''sortable'' cannot be used with virtual elements ). ¿Cómo puedo lograr el mismo efecto (la última pestaña es un botón) con ordenable? Sin embargo, no se puede mover la pestaña / botón final.

La respuesta puede no tener que estar agregando una pestaña, podría estar agregando un elemento que aparece al final de las pestañas.

Actualizar:

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

Answer 1

El enlace personalizado puede hacer el trabajo por usted, aquí está el violín actualizado:

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

Para excluir cualquier elemento li particular del elemento ordenable, puede usar la opción de elementos del complemento ordenable jquery ui, acepta los selectores jquery.

Actualizar

Para hacer algo después de mover el elemento, puede utilizar el evento Actualizar de jquery ui sortable. Comprueba este violín actualizado, en este violín después de mover el objeto recibirás la alerta:

Fiddle actualizado