OK, so I'm playing with the @RubaXa Sortable plugin again (and hopefully it is here somewhere, since this one is just pretty complicated ...)
A few discoveries (it took me a while to fully understand the mechanism, but I think I'm right)
Case 1
if we set up one div with content of the same type, it is instantly sorted. For instance:.
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 up one div with content of a different type (for example, h2 and h3 s, we must also specify the draggable class. For example:
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) div s, side by side, it works pretty much the same. For instance:.
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/
NUMBER
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 within their container. This is normal.myContainer1 , although it can be moved to myContainer2 , I mean take element 1.1 and put it inside myContainer2 works - which did not exist when both containers were third-party side.
So how can we disable this behavior? I mean: each container should move ONLY inside this container, and not inside its children.
How can I do that?