How to get nested lists with rubaxa sortable.js

Question

I use Rubaxas Sortable.js to sort lists.

My problem is that I can move ".group_container" to the bottom of the main holder, but not in between 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

It’s actually quite simple, all you need is a group in your parameters that allows you to sort objects in one context.

// Simple list
var opts = {
  group: 'shared',
  draggable: '.question',
  group: 'foo'
};
var opts2 = {
  draggable: '.group_container',
  group: 'foo'
};

Enjoy it!