title: Bootstrap Nestable List-Group - JQuery Sortable
body: <p>Hi can anyone help me with JQuery Sortable? I need to make this list sortable. I cannot get it to work right been able to drag the parent that is inside another parent. Do I have to make the  handle the prev() element?  </p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;ul class="list-group list-group-root well"&gt;
  
      &lt;li href="#item-1" class="list-group-item" data-toggle="collapse"&gt;
          &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1
      &lt;/li&gt;
  
      &lt;ul class="list-group collapse" id="item-1"&gt;
  
          &lt;li href="#item-1-1" class="list-group-item" data-toggle="collapse"&gt;
              &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1.1
          &lt;/li&gt;
  
          &lt;ul class="list-group collapse" id="item-1-1"&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.1.1&lt;/li&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.1.2&lt;/li&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.1.3&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;li href="#item-1-2" class="list-group-item" data-toggle="collapse"&gt;
              &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1.2
          &lt;/li&gt;
  
          &lt;ul class="list-group collapse" id="item-1-2"&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.2.1&lt;/li&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.2.2&lt;/li&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.2.3&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;li href="#item-1-3" class="list-group-item" data-toggle="collapse"&gt;
              &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;Item 1.3
          &lt;/li&gt;
          &lt;ul class="list-group collapse" id="item-1-3"&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.3.1&lt;/li&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.3.2&lt;/li&gt;
              &lt;li href="#" class="list-group-item"&gt;Item 1.3.3&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/ul&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS..</p>
  
  <pre><code>    .list-group.list-group-root {
      padding: 0;
      overflow: hidden;
      }
  
      .list-group.list-group-root .list-group {
      margin-bottom: 0;
      }
  
      .list-group.list-group-root .list-group-item {
      border-radius: 0;
      border-width: 1px 0 0 0;
      }
  
      .list-group.list-group-root &gt; .list-group-item:first-child {
      border-top-width: 0;
      }
  
      .list-group.list-group-root &gt; .list-group &gt; .list-group-item {
      padding-left: 30px;
      }
  
      .list-group.list-group-root &gt; .list-group &gt; .list-group &gt; .list-group-item {
      padding-left: 45px;
      }
  
      .list-group-item .glyphicon {
      margin-right: 5px;
      }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Lh2rzts6/" rel="nofollow noreferrer">https://jsfiddle.net/Lh2rzts6/</a></p>