How to achieve nested lists with rubaxa sortable.js - rubaxa-sortable

Question

I'm using Rubaxas Sortable.js to be able to sort lists.
My problem is that i can only move the ".group_container" to the bottom of the main holder but not inbetween the other lists.
Heres a jsFiddle https://jsfiddle.net/adishardis/6csou39n/4/
<h1>Sortable</h1>
<div class="group" id="main">
<div class="group group_container" id="group1">
a
<div class="question">item 1</div>
<div class="question">item 2</div>
<div class="question">item 3</div>
</div>
<div class="group group_container" id="group2">
b
<div class="question">item 4</div>
<div class="question">item 5</div>
<div class="question">item 6</div>
</div>
<div class="group group_container" id="group3">
c
<div class="question">item 7</div>
<div class="question">item 8</div>
<div class="question">item 9</div>
</div>
</div>
What am I missing?

Answer 1

This is actually quite simple, all you need is a group in your options to allow the sortable objects to be within the same context.
// Simple list
var opts = {
group: 'shared',
draggable: '.question',
group: 'foo'
};
var opts2 = {
draggable: '.group_container',
group: 'foo'
};
Enjoy!

Answer 2

This worked for me. First, all divs should have both class group and group_container.
Finally, the Javascript should be like this:
// Simple list
var opts = {
group: 'shared',
draggable: '.group_container',
animation: 50,
fallbackOnBody: true,
wapThreshold:.5
};
var opts2 = {
group: 'shared',
draggable: '.group_container'
};
document.querySelectorAll("#main .group").forEach((e)=>Sortable.create(e, opts))
var el = document.getElementById('main');
var sortable = Sortable.create(el, opts2);
With this, each div tag is draggable and also can receive new elements in it.
Live example:
// Simple list
var opts = {
group: 'shared',
draggable: '.group_container',
animation: 50,
fallbackOnBody: true,
swapThreshold:.5
};
var opts2 = {
group: 'shared',
draggable: '.group_container'
};
document.querySelectorAll("#main .group").forEach((e)=>Sortable.create(e, opts))
var el = document.getElementById('main');
var sortable = Sortable.create(el, opts2);
body {
margin: 10px;
}
.glyphicon-move {
cursor: move;
cursor: -webkit-grabbing;
}
.item {
padding: 1em;
margin-bottom: .2em;
background: rgba(120, 255, 120, 0.8);
cursor: move;
}
.question {
padding: 0.5em;
margin-bottom: .2em;
background: #fff;
cursor: move;
}
.group {
padding: 1em;
margin-bottom: 1em;
background: #ddd;
cursor: move;
}
.group_container {
padding: 1em;
margin-bottom: 1em;
background: rgba(255, 120, 120, 0.2);
cursor: move;
}
.item.group {
background: rgba(120, 120, 255, 0.2);
cursor: move;
}
<script type="text/javascript" src="https://rawgit.com/RubaXa/Sortable/master/Sortable.min.js"></script>
<h1>Sortable</h1>
<div class="group" id="main">
<div class="group group_container" id="group1">
a
<div class="group group_container">item 1</div>
<div class="group group_container">item 2</div>
<div class="group group_container">item 3</div>
</div>
<div class="group group_container" id="group2">
b
<div class="group group_container">item 4</div>
<div class="group group_container">item 5</div>
<div class="group group_container">item 6</div>
</div>
<div class="group group_container" id="group3">
c
<div class="group group_container">item 7</div>
<div class="group group_container">item 8</div>
<div class="group group_container">item 9</div>
</div>
</div>
Regards.