Pairing several jQueryUI sortables without crossover

Question

I'm working on a drag-drop-reorder widget of sorts, where a user can drag elements from one sortable (let's call it the LEFT box) to another (RIGHT box)

The problem here is, I'll be having multiple such widgets.

What I want to do is to PAIR them, so that the item from LEFT box of one widget cannot be dragged to another widget's RIGHT box.

My current pseudocode is:

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

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


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

As the two UL's are siblings, I've tried stuff like

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

This doesn't work, as sortable's internal code does not consider the current element while trying to locate the connected element.

I've also tried using the containment option to point to the parent of both ULs, but that doesn't work, either.

What would you suggest I do?

Answer 1

Solved it!

In the onReceive callback of all sortables, I called this method:

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

Whenever a receive event occurs for any sortable, get the parent elements of both sortables (the DOM, not the jQuery object) and compare them. If they indeed are a pair, they'd be equal. If not, cancel the event.

It took me time to figure out (1) you can't compare two jQuery objects by just an equality operator and (2) a return false won't help, you've got to call the cancel method.

The pairing works as expected.