Forbid nested sortable to mix

Question

I have a parent div with a special ID whose children I'm sorting. Those children also have sortable children, I'll have these children have sortable items too. So my sortable nestedness goes in three levels

<div id="sortableGrandParent">
  <div id="sortableParent1">SomeTitle1
    <div id="sortableChild11">I want these to only</div>
    <div id="sortableChild21">sort between themselves</div>
  </div>
  <div id="sortableParent2">SomeTitle2
    <div id="sortableChild21">And not jump to here</div>
  </div>
</div>

I initiate all this with the

  jQuery(function () {

          jQuery("#sortableGrandParent, #sortableParent1, #sortableParent2").sortable({ ...

And it works. I can sort both children and parents, I even managed to figure out a way to save them in the DB separately. What's the issue is I have the children of sortableParent2 go together with the children of sortableParent1 and even though I can't save that into the DB as the IDs don't match, its counter user friendly and if possible I'd like each DIV's children to only sort between themselves.

I'm pretty sure I need to use connectWith in some way and get some mix N' match situation going on, but am not at all sure how to ?

Answer 1

As mentioned in the comment:

This is exactly the behaviour you get with the default values of items and connectWith

jQuery("#sortableGrandParent, #sortableParent1, #sortableParent2").sortable({
    items: ">*",
    connectWith: false
});

Fiddle: http://jsfiddle.net/tnx8jrqs/