How to achieve nested lists with rubaxa sortable.js

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.