Jquery ui 具有引导排序功能的元项

使用knockout，您可以生成一行引导导航选项卡，如下所示

<ul class="nav nav-tabs question-container" data-bind="foreach: Questions">
  <li role="presentation" data-bind="css: { active: $index() === 0 }">
    <a data-toggle="tab" 
       data-bind="attr: { href: '#q' + QuestionId() }">, text: Caption"></a>
  </li>
</ul>

使用bootstrap sortable，只需更改绑定即可对选项卡进行排序。有一个明确记录的限制是，不能对虚拟元素使用可排序绑定，因为它依赖于在单个容器元素上定义

假设我想添加一个选项卡添加一个新问题，在Chrome、InternetExplorer、Firefox和MicrosoftExcel中使用的添加新选项卡的方式之后，显示创建内容的各种选项

如果我不想让标签可排序，我会这样做：

<ul class="nav nav-tabs question-container">
  <!-- ko foreach: Questions-->
  <li role="presentation" data-bind="css: { active: $index() === 0 }">
    <a data-toggle="tab" 
       data-bind="attr: { href: '#q' + QuestionId() }, text: Caption"></a>
  </li>
  <!-- /ko -->
  <li role="presentation" data-bind="css: { active: Questions().length === 0 }">
    <a data-toggle="tab" href="#addQuestion">
    <i class="fa fa-plus"></i>Add a new question</a>
  </li>
</ul>

通过向模板中的添加标记类可排序项，我们可以通过在引导可排序选项中定义项：。可排序项来排除元项。但它仍然无法运行，因为您不能将虚拟元素与引导排序一起使用

有人知道如何将元项添加到由bootstrap sortable管理的集合中吗

有四种方法可以解决这个问题

不要使用bootstrap sortable，显式应用jQuery UI sortable和ise sort update事件来更新备份存储集合。 使用引导并在绑定完成后注入元项。 修改引导以支持除绑定模板之外的元项模板的概念。 修改引导以使用虚拟节点的直接父节点。总有一个父母，即使是身体。 就我个人而言，我支持选项4，因为它不会改变bootstrap sortable的应用方式，它只是消除了一个限制。没有破坏性的变化

选项三几乎同样好，但它增加了概念的复杂性，使学习曲线更加陡峭

第二种选择是大石头。它破坏了关注点的分离

选项一，就是我实际做的，吸吮更大的石头。它不仅用UI行为污染了视图模型，而且操作起来很复杂，依赖于缺乏文档和晦涩难懂的内部实用程序，而且非常难看。关于它的一切都证明了bootstrap sortable的存在

针对这一评论：

---

“添加问题”按钮不是问题，因此不应 成为问题清单的一部分

它不是一个问题列表，而是一组可以在问题列表上执行的操作的UI。其中大多数是用于编辑的显示项X，但其中一个是创建新项。还提供用于删除项目和重新排序项目的控件

---

我觉得可笑的是，任何人都会声称在使用web浏览器时这不是一个明显的UI设计-这是一个普遍存在的例子，说明了这种精确的设计

目前似乎没有比我在问题中提到的解决方法更好的故事了。理想的解决方案是我或其他人编写一个击倒绑定。bootstrap sortable中的大多数代码似乎都与模板化它生成的非常漂亮的表有关，但我认为必要的课程已经存在。

添加问题按钮不是问题，因此它不应该是问题列表的一部分。一旦你不再坚持把它塞进包含问题的同一个元素中，你的问题就解决了。我必须同意@Tomalak，把这个按钮添加到列表中似乎不是很明显。写信给谷歌、微软和Mozilla，告诉他们他们都错了。与此同时，也许我们可以把注意力集中在所问的问题上，但为什么它必须成为清单的一部分呢？这并不是因为这个特殊的标签在视觉上是相似的；您可以将其设置为相同的样式，并将其放置在列表旁边。你正在谈论的那些浏览器可能就是这样做的，例如检查源代码中的Chromium。虽然_tabs是一个包含浏览器选项卡的数组，但“添加新选项卡”按钮的结构是w。一个单独的NewTabButton类，位于list@Tyblitz-制表符机制是一种管理有限UI空间的整洁方式，用户能够很好地理解它，因此它不会导致认知失调。在这种情况下，每个选项卡都显示了可以对主题执行的各种操作—创建、编辑和删除主题。在这个系统之外只做一次手术确实会引起认知失调，我已经组织了焦点小组。从工程角度来看，另一个选项卡也更整洁。我已经让它工作了。我希望使用bootstrap sortable，这样我就可以在标记和恢复关注点分离方面做任何事情。