具有 jquery 可排序和 Meteor Blaze 的多个可排序列表答案

【问题标题】：Multiple sortable lists with jquery sortable and Meteor Blaze具有 jquery 可排序和 Meteor Blaze 的多个可排序列表
【发布时间】：2014-06-29 22:18:10
【问题描述】：

我有两个列表，我想用 jQuery UI 进行排序。问题是只有一个列表可以排序/可拖动。

jqtest.html:

<body>
 <div id="list1">
  <li>one</li>
  <li>two</li>
  <li>three</li>
 </div>

 <div id="list2">
  <li>one</li>
  <li>two</li>
  <li>three</li>
 </div>
</body>

jqtest.js

不工作：

UI.body.rendered = function(){
this.$("#list1", "#list2").sortable();
}

这行得通：

UI.body.rendered = function(){
 this.$("#list1").sortable();
 this.$("#list2").sortable();
}

通过查看控制台，我可以看到 ui-sortable 类仅添加到 list1 中，因此这可能就是它不起作用的原因。我尝试手动将类添加到 list2，但这也不起作用（添加了类但无法拖动）。

我通过复制每个列表的可排序调用来使其工作，但这对我来说似乎不是很枯燥，并且可能会对性能产生影响。

【问题讨论】：

附带说明，您拥有的 html 无效...<li> 应该是 <ul> 的直接子代
您可能希望使用原生 HTML5 拖放 API 来代替 jQuery，使用 this Meteor wrapper。

标签： meteor jquery-ui-sortable

【解决方案1】：

您可以通过将 id 组合成一个逗号分隔的字符串来做到这一点：

this.$('#list1, #list2').sortable();

【讨论】：

效果很好。我从哪里得到这种语法？谢谢！
jquery 只使用普通的css selector syntax。所以X, Y 表示页面上的所有 X 和所有 Y。