Restrict container/parent for Sortable

Question

OK, so here I am again, playing with @RubaXa's Sortable plugin (and hopefully he is somewhere around here, as this one is simply rather complicated...)

A few discoveries (it took me some time to fully understand the mechanism, but I think I'm quite right)

---

Case 1

if we set one div with same-type contents, it's instantly sortable. E.g.:

HTML

<div id="myContainer">
     <h3>Item 1</h3>
     <h3>Item 2</h3>
</div>

JavaScript

new Sortable(document.getElementById("myContainer"));

Demo: http://jsfiddle.net/b02wfe4o/

---

Case 2

if we set one div with different-type contents (e.g. h2s and h3s, we also have to specify the draggable class. E.g.:

HTML

<div id="myContainer">
     <h3 class="myDraggable">Item 1</h3>
     <h4 class="myDraggable">Item 2</h4>
</div>

JavaScript

new Sortable(document.getElementById("myContainer"), {
     draggable: '.myDraggable'
});

Demo: http://jsfiddle.net/qemz00eq/1/

---

Case 3

if we set 2 (or more) divs, side-by-side, it works pretty much the same way. E.g.:

HTML

<div id="myContainer1">
     <h3 class="myDraggable">Item 1.1</h3>
     <h4 class="myDraggable">Item 1.2</h4>
</div>

<div id="myContainer2">
     <h3 class="myDraggable">Item 2.1</h3>
     <h4 class="myDraggable">Item 2.2</h4>
</div>

JavaScript

new Sortable(document.getElementById("myContainer1"), {
     draggable: '.myDraggable'
});

new Sortable(document.getElementById("myContainer2"), {
     draggable: '.myDraggable'
});

Demo: http://jsfiddle.net/qeyxxj4y/

---

THE ISSUE

Now, what if sortable A is a child of sortable B?

HTML

<div id="myContainer1">
     <h3 class="myDraggable">Item 1.1</h3>
     <h4 class="myDraggable">Item 1.2</h4>

     <div id="myContainer2">
           <h3 class="myDraggable">Item 2.1</h3>
           <h4 class="myDraggable">Item 2.2</h4>
     </div>

</div>

JavaScript

new Sortable(document.getElementById("myContainer1"), {
     draggable: '.myDraggable'
});

new Sortable(document.getElementById("myContainer2"), {
     draggable: '.myDraggable'
});

Demo: http://jsfiddle.net/j7fesLkp/8/

---

Well, now this does not work as expected:

• myContainer2 items can be moved/sorted perfectly within their container. Which is fine.
• myContainer1 items though can be moved in myContainer2 as well, I mean take element 1.1 and put it inside myContainer2 works - which wasn't happening when the two containers were side-by-side.

So, how can we disable that behaviour? I mean: each container's items must move ONLY within that container and not within its children.

How can that be done?

Answer 1

You will gave to separate the sortables, and divide them in two different groups. So change the class of one of the groups in html and Js to initialize them as another group.