我正在使用 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
,因为它不起作用(绑定(bind)“sortable”不能与虚拟元素一起使用
)。如何使用可排序达到相同的效果(最后一个选项卡是一个按钮)?但无法移动最后一个选项卡/按钮。
答案可能不一定是添加一个选项卡,它可能是添加一个出现在选项卡末尾的元素。
更新:
JSFiddle:http://jsfiddle.net/pbNvz/6/
最佳答案
Custom binding可以为您完成这项工作,这是更新的 fiddle :
http://jsbin.com/edopuh/3/edit
要从可排序元素中排除任何特定的 li 元素,您可以使用 items jquery ui 可排序插件的选项,它接受 jquery 选择器。
更新
要在移动项目后执行某些操作,您可以使用 Update event jquery ui 的可排序。检查这个更新的 fiddle ,在移动项目后,在这个 fiddle 中您将收到警报:
关于jquery - 将最后一个选项卡添加到可排序的选项卡式列表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15734263/