Question

I haven’t seen any examples of selective sortables:

[A: one master list]
[B: one sublist]
[C: another sublist]

---

Conditions:

1. B and C can transfer to A
2. A can only transfer to B the elements that came from B (the same applies to C)
3. B and C cannot transfer between eachother

---

Example Structure:

<ul class="A"></ul>    
<ul class="B">
   <li class="child-B" />
   <li class="child-B" />
   <li class="child-B" />
</ul>
<ul class="C">
   <li class="child-C" />
   <li class="child-C" />
   <li class="child-C" />
</ul>

---

I’ve tried applying sortable to the lists and trying to dynamically alter the connectWith afterwards (they’d all be able to connect to A), but no luck. Here’s one of my attempts (jsFiddle). I also tried putting ‘.master,.sub’ as the initial connectWith, but it allows cross sharing.

I think the second looping is updating the sortable’s connectWith, so I’m stuck. Any ideas?

Answer 1

This is the first time that I’ve played around with sortable (with a bit of reading from jqueryui.com) but I think this should do the trick. You can see it in action at the following jsFiddle

HTML:

<ul class="master"></ul>

<ul class="sub a">
    <li class="a">Foo</li>
    <li class="a">Boo</li>
</ul>
<ul class="sub b">
    <li class="b">Bar</li>
    <li class="b">Baz</li>
</ul>

JQuery:

$(document).ready(function(){

    // create sortables
    $( ".master,.sub" ).sortable({
       connectWith: ".master,.sub",
       revert: true,
       receive: function(event, ui) {

           // only perform for sub drop downs
           if ($(this).hasClass('sub'))
           {
               // if the item doesn't have the matching sub class
               if (!$(this).hasClass($(ui.item).attr('class')))
               {
                   // cancel the sortable
                   $(ui.sender).sortable('cancel');
               }
           }
       }
    }).disableSelection(); 
});

This example basically performs the validation on receiving the item, and if it doesn’t pass, it cancels the move.

Hope it’s what you’re looking for.