jquery - 配对多个 jQueryUI 可排序而不交叉

Question

我正在开发一种拖放重新排序小部件，用户可以将元素从一个可排序(我们称之为左侧框)拖动到另一个可排序(右侧框)

这里的问题是，我将拥有多个这样的小部件。

我想要做的是将它们配对，以便一个小部件左框中的项目不能拖动到另一个小部件的右框中。

我当前的伪代码是:

<ul class = "left">
...
</ul>

<ul class = "right">
...
</ul>


$('.left').sortable
  connectWith: '.right'

由于两个 UL 是 sibling ，我尝试过类似的方法

$('.left').sortable
  connectWith: '+ .right'

这不起作用，因为 sortable 的内部代码在尝试定位连接的元素时不会考虑当前元素。

我还尝试使用 containment 选项来指向两个 UL 的父级，但这也不起作用。

你建议我做什么？

Answer 1

解决了!

在所有sortables的onReceive回调中，我调用了这个方法:

checkPairing = (event, ui, el) ->
  firstParent = $(el).parent().get(0)
  secondParent = $(ui.sender).parent().get(0)
  $(ui.sender).sortable('cancel') unless firstParent == secondParent

每当任何可排序对象发生接收事件时，获取两个可排序对象的父元素(DOM，而不是 jQuery 对象)并比较它们。如果他们确实是一对，那么他们就是平等的。如果没有，请取消事件。

我花了一些时间才弄清楚(1)你不能仅通过相等运算符来比较两个 jQuery 对象，并且(2)return false 不会有帮助，你必须调用取消方法。

配对按预期进行。