2

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

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

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

我目前的伪代码是：

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

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


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

由于两个 UL 是兄弟姐妹，我尝试过类似的东西

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

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

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

你会建议我做什么？

4

1 回答 1

0

解决了！

在所有 sortable 的 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）areturn false无济于事，您必须调用 cancel 方法。

配对按预期工作。

于 2012-06-12T09:49:54.987 回答