Question

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

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

我想做的是对它们进行配对，这样一个小部件的LEFT框中的项目就无法拖动到另一个小部件的右侧框中。

我目前的伪代码是：

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

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


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

由于两个UL是兄弟姐妹，我尝试了像

这样的东西

$('.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

每当对任何sortable发生receive事件时，获取两个sortables的父元素（DOM，而不是jQuery对象）并比较它们。如果他们确实是一对，他们就是平等的。如果没有，请取消活动。

我花了很多时间弄清楚（1）你不能仅通过相等运算符比较两个jQuery对象而（2）return false无效，你必须调用cancel方法

配对按预期工作。

在没有交叉的情况下配对几个jQueryUI sortables

1 个答案: