Tree View | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### 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
    - E-chart
      - esl.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="grid grid-cols-12">
     <div class="col-span-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-span-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.

- Teresa J. Mosteller
- Gloria D. Acheson
- Sharon C. Obrien
- Bryan A. Owens

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

##### Random Sortable

Use`sortable-grids` id, you can drag and drop the grid.

    <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>