// source https://jsbin.com/notiyoheho

index.html

<style id="jsbin-css">
.sortable-ghost {
  opacity: .5;
  background: #C8EBFB;
}











body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}
</style>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
  
  
<!-- Latest Sortable -->
<script src="http://rawgit.com/rubaxa/Sortable/master/Sortable.js"></script>
  
  
<!-- HTML -->
<ul id="list" class="list-group nested-sortable">
  <li class="list-group-item nested-1">item 1
    <ul class="list-group nested-sortable">
      <li class="list-group-item nested-1">Item 1.1</li>
    </ul>
  </li>
  <li class="list-group-item nested-1">item 2
    <ul class="list-group nested-sortable">
    </ul>
  </li>
  <li class="list-group-item nested-1">item 3
    <ul class="list-group nested-sortable">
    </ul>
  </li>
  <li class="list-group-item nested-1">item 4
    <ul class="list-group nested-sortable">
    </ul>
  </li>
  <li class="list-group-item nested-1">item 5
    <ul class="list-group nested-sortable">
    </ul>
  </li>
</ul>
<script id="jsbin-javascript">
Sortable.create(list, {
  group: "nested",
  fallbackOnBody: true,
  invertSwap: true
});

var dropTargets = document.querySelectorAll("ul");
[].forEach.call(dropTargets, function(target) {
  Sortable.create(target, {
    group: "nested",
    fallbackOnBody: true,
    invertSwap: true
  });
});
</script>
<script id="jsbin-source-html" type="text/html"><\!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
  
  
<\!-- Latest Sortable -->
<script src="//rawgit.com/rubaxa/Sortable/master/Sortable.js"><\/script>
  
  
<\!-- HTML -->
<ul id="list" class="list-group nested-sortable">
  <li class="list-group-item nested-1">item 1
    <ul class="list-group nested-sortable">
      <li class="list-group-item nested-1">Item 1.1</li>
    </ul>
  </li>
  <li class="list-group-item nested-1">item 2
    <ul class="list-group nested-sortable">
    </ul>
  </li>
  <li class="list-group-item nested-1">item 3
    <ul class="list-group nested-sortable">
    </ul>
  </li>
  <li class="list-group-item nested-1">item 4
    <ul class="list-group nested-sortable">
    </ul>
  </li>
  <li class="list-group-item nested-1">item 5
    <ul class="list-group nested-sortable">
    </ul>
  </li>
</ul>
</script>

<script id="jsbin-source-css" type="text/css">.sortable-ghost {
  opacity: .5;
  background: #C8EBFB;
}











body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}

</script>

<script id="jsbin-source-javascript" type="text/javascript">Sortable.create(list, {
  group: "nested",
  fallbackOnBody: true,
  invertSwap: true
});

var dropTargets = document.querySelectorAll("ul");
[].forEach.call(dropTargets, function(target) {
  Sortable.create(target, {
    group: "nested",
    fallbackOnBody: true,
    invertSwap: true
  });
});</script>

jsbin.notiyoheho.css

.sortable-ghost {
  opacity: .5;
  background: #C8EBFB;
}











body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}

jsbin.notiyoheho.js

Sortable.create(list, {
  group: "nested",
  fallbackOnBody: true,
  invertSwap: true
});

var dropTargets = document.querySelectorAll("ul");
[].forEach.call(dropTargets, function(target) {
  Sortable.create(target, {
    group: "nested",
    fallbackOnBody: true,
    invertSwap: true
  });
});