Tree View

Stackable Sortable Lists

It is also usually advised to make sure that the swapThreshold option is less than the default value of 1 or that the invertswap option is set to true. You may use icons, SVGs, photos ... etc. according to your needs.

Item 1.1
Item 2.1
Item 2.2
Item 3.1
Item 3.2
Item 3.3
Item 2.3
Item 1.2
Item 1.3
Item 2.1
Item 2.2
Item 2.3
Item 1.4
<div class="card-body stackable-list">
 <div class="list-group col nested-sortable" id="nested-demo">
   <div class="list-group-item nested-1"><i class="fa fa-folder-open"></i>Item 1.1
     <div class="list-group nested-sortable">
       <div class="list-group-item nested-2"><i class="fa fa-folder-open"></i>Item 2.1</div>
       <div class="list-group-item nested-2"><i class="fa fa-folder-open"></i>Item 2.2
         <div class="list-group nested-sortable">
           <div class="list-group-item nested-3"><i class="fa fa-folder-open"></i>Item 3.1</div>
           <div class="list-group-item nested-3"><i class="fa fa-folder-open"></i>Item 3.2</div>
           <div class="list-group-item nested-3"><i class="fa fa-folder-open"></i>Item 3.3</div>
         </div>
       </div>
       <div class="list-group-item nested-2"><i class="fa fa-folder-open"></i>Item 2.3</div>
     </div>
   </div>
   <div class="list-group-item nested-1"><i class="fa fa-folder-open"></i>Item 1.2</div>
   <div class="list-group-item nested-1"><i class="fa fa-folder-open"></i>Item 1.3
     <div class="list-group nested-sortable">
       <div class="list-group-item nested-2"><i class="fa fa-folder-open"></i>Item 2.1</div>
       <div class="list-group-item nested-2"><i class="fa fa-folder-open"></i>Item 2.2</div>
       <div class="list-group-item nested-2"><i class="fa fa-folder-open"></i>Item 2.3</div>
     </div>
   </div>
   <div class="list-group-item nested-1"><i class="fa fa-folder-open"></i>Item 1.4</div>
 </div>
</div>

Sortable Swap Lists

Sortable's functionality is altered by the swap plugin so that objects can be exchanged with one another instead of being sorted.

  • Assets
    • images
      • social.png
  • JS
    • chart
      • apex-chart
        • apex-chart.js
  • Audio
  • CSS
    • vendors
      • emoji
      • slick
<div class="card-body swap-wrapper">
 <ul class="list-group" id="sortable-swap">
   <li class="list-group-item nested-1"><img src="../assets/images/tree/s1.png" alt="#"> Assets
     <ul class="list-group">
       <li class="list-group-item nested-2"><img src="../assets/images/tree/picture.png" alt="#">Images
         <ul class="list-group"> 
           <li class="list-group-item nested-3"><img src="../assets/images/tree/social.png" alt="#">Social.png</li>
         </ul>
       </li>
     </ul>
   </li>
   <li class="list-group-item nested-1"><img src="../assets/images/tree/js.png" alt="#">JS
     <ul class="list-group"> 
       <li class="list-group-item nested-2"> <img src="../assets/images/tree/chart.png" alt="#">Chart
         <ul class="list-group"> 
           <li class="list-group-item nested-3"><img src="../assets/images/tree/chart1.png" alt="#">E-chart 
             <ul class="list-group"> 
               <li class="list-group-item nested-4"> <img src="../assets/images/tree/chart1.png" alt="#">esl.js     </li>
             </ul>
           </li>
         </ul>
       </li>
     </ul>
   </li>
   <li class="list-group-item nested-1"><img src="../assets/images/tree/volume.png" alt="#">Audio</li>
   <li class="list-group-item nested-1"><img src="../assets/images/tree/css.png" alt="#">CSS
     <ul class="list-group"> 
       <li class="list-group-item nested-2"><img src="../assets/images/tree/slick.png" alt="#">Vendors
         <ul class="list-group"> 
           <li class="list-group-item nested-3"><img src="../assets/images/tree/emoji.png" alt="#">Emoji</li>
           <li class="list-group-item nested-3"><img src="../assets/images/tree/slick.png" alt="#">Slick</li>
         </ul>
       </li>
     </ul>
   </li>
 </ul>
</div>

Simple Lists

To change the basic draggable option, simply drag and drop using the "basic-list" id.

  • Section 1
  • Section 2
  • Section 3
  • Section 4
  • Section 5
<ul class="list-group" id="basic-list">
 <li class="list-group-item">Section 1</li>
 <li class="list-group-item">Section 2</li>
 <li class="list-group-item">Section 3</li>
 <li class="list-group-item">Section 4</li>
 <li class="list-group-item">Section 5</li>
</ul>

Shared Lists

Toggle between lists by dragging. you can drag an item to share it, and the shared item will remain in the original list.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10 
<div class="row"> 
 <div class="col-6"> 
   <ul class="list-group" id="mix-left">
     <li class="list-group-item"> <i class="fa sitemap me-2"></i><span>Item 1</span></li>
     <li class="list-group-item"><i class="fa sitemap me-2"></i><span>Item 2</span></li>
     <li class="list-group-item"><i class="fa sitemap me-2"></i><span>Item 3</span></li>
     <li class="list-group-item"><i class="fa sitemap me-2"></i><span>Item 4</span></li>
     <li class="list-group-item"><i class="fa sitemap me-2"></i><span>Item 5</span></li>
   </ul>
 </div>
 <div class="col-6">
   <ul class="list-group" id="mix-right">
     <li class="list-group-item light-background"> <i class="fa sitemap me-2"></i><span>Item 6</span></li>
     <li class="list-group-item light-background"><i class="fa sitemap me-2"></i><span>Item 7 </span></li>
     <li class="list-group-item light-background"><i class="fa sitemap me-2"></i><span>Item 8</span></li>
     <li class="list-group-item light-background"><i class="fa sitemap me-2"></i><span>Item 9</span></li>
     <li class="list-group-item light-background"><i class="fa sitemap me-2"></i><span>Item 10</span></li>
   </ul>
 </div>
</div>

Disabled Lists

Keep the list sorted by leaving it that way. It isn't feasible since the sort option is set to false.

  • Online course
  • Crypto
  • Social
  • Chart
  • General
<ul class="list-group" id="disable-list">
 <li class="list-group-item">Online course</li>
 <li class="list-group-item">Crypto </li>
 <li class="list-group-item">Social</li>
 <li class="list-group-item">Chart</li>
 <li class="list-group-item">General</li>
</ul>

Sortable using the Handle List

Simply click the handler and drag and drop to alter the handle draggable option.

  • Home
  • Products
  • About Us
  • Contact Us
  • Applications
  • Frameworks
<ul class="list-group" id="sortable-handle">
 <li class="list-group-item light-background"><i class="fa fa-arrows handle"></i>Home</li>
 <li class="list-group-item"><i class="fa fa-arrows handle"></i>Products</li>
 <li class="list-group-item light-background"><i class="fa fa-arrows handle"></i>About Us</li>
 <li class="list-group-item"><i class="fa fa-arrows handle"></i>Contact Us</li>
 <li class="list-group-item light-background"><i class="fa fa-arrows handle"></i>Applications</li>
 <li class="list-group-item"><i class="fa fa-arrows handle"></i>Frameworks</li>
</ul>

Draggable Filtering

Try dragging the object with the.list-light-* backdrop. That item is filtered out by the filter option, so it is not possible to accomplish that.

  • userTeresa J. Mosteller
  • userGloria D. Acheson
  • userSharon C. Obrien
  • userBryan A. Owens
<ul class="list-group" id="draggable-filter">
 <li class="list-group-item">
   <img class="rounded-circle" src="../assets/images/user/1.jpg" alt="user">Teresa J. Mosteller
 </li>
 <li class="list-group-item">
   <img class="rounded-circle" src="../assets/images/user/3.png" alt="user">Gloria D. Acheson
 </li>
 <li class="list-group-item filtered list-light-primary">
   <img class="rounded-circle" src="../assets/images/user/10.jpg" alt="user">Sharon C. Obrien
 </li>
 <li class="list-group-item">
   <img class="rounded-circle" src="../assets/images/user/5.jpg" alt="user">Bryan A. Owens
 </li>
</ul>

Random Sortable

You can just drag and drop after entering your requirements. 

<div class="grid-box-wrapper" id="sortable-grids">
 <div class="grid-box"><img src="../assets/images/social-app/post-1.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-2.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-3.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-4.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-5.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-6.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-7.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-8.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-9.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-1.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-2.png" alt="#"></div>
 <div class="grid-box"><img src="../assets/images/social-app/post-3.png" alt="#"></div>
</div>