将最后一个标签添加到可排序的标签列表中 [英] Add one last tab to a sortable tabbed list

问题描述

我正在使用twitter引导程序，剔除，剔除可排序和JQuery UI(同样是haml，但这与问题无关紧要).我显示如下所示的选项卡式列表.它添加了一个带有按钮的最终标签.

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

我不能使用/ko sortable: pages，因为它不起作用(The binding 'sortable' cannot be used with virtual elements).如何使用sortable达到相同的效果(最后一个选项卡是一个按钮)?虽然不能移动最后一个标签/按钮.

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.

更新:

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

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

推荐答案

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

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

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

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

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

更新

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

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 :

更新了小提琴

这篇关于将最后一个标签添加到可排序的标签列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！