Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!-- 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>
 
.sortable-ghost {
  opacity: .5;
  background: #C8EBFB;
}
body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}
 
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
  });
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers