JQuery is a sortable tree plug-in that enables the user to reorder items in a menu tree by drag and drop. Based on jQuery UI sortable functionality.
This is a sortable jquery UI helper for an easy-to-use tree-type structure.
Must Read: Windows File Explorer Is Like A Folder Tree | jQueryFileExplorer
How to make use of it:
1. Load jQuery and jQuery UI within the document.
<link rel="stylesheet" href="/path/to/cdn/jquery-ui.css" /> <script src="/path/to/cdn/jquery-ui.min.js"></script> <script src="/path/to/cdn/jquery.slim.min.js"></script>
2. Create a hierarchical tree from nested HTML lists as follows:
<ul id="tree"> <li class="tree-branch branch-level-1"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 1</span> </div> </div> <div class="children-bus"></div> </li> <li class="tree-branch branch-level-2"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 2</span> </div> </div> <div class="children-bus"></div> </li> <li class="tree-branch branch-level-2"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 3</span> </div> </div> <div class="children-bus"></div> </li> <li class="tree-branch branch-level-3"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 4</span> </div> </div> <div class="children-bus"></div> </li> <li class="tree-branch branch-level-3"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 5</span> </div> </div> <div class="children-bus"></div> </li> <li class="tree-branch branch-level-2"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 6</span> </div> </div> <div class="children-bus"></div> </li> <li class="tree-branch branch-level-1"> <div class="contents"> <div class="branch-drag-handler"> <span class="branch-title">Branch 7</span> </div> </div> <div class="children-bus"></div> </li> </ul>
3. Here are the instance CSS types for the sortable tree.
#tree { padding: 0.1em 0; list-style: none; margin: 0; } #tree .tree-branch { margin-bottom: 0; position: relative; } .tree-branch > .contents { clear: both; line-height: 1.5; position: relative; margin: 10px 0 0; } .contents .branch-drag-handler { cursor: move; background: #fff; border: 1px solid #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); border-radius: 3px; position: relative; padding: 10px 15px; height: auto; min-height: 20px; max-width: 450px; line-height: 2.3076923; overflow: hidden; word-wrap: break-word; } .branch-drag-handler .icon { color: #504e4e; margin-right: 5px; } #tree .sortable-placeholder { border: 1px dashed rgb(63, 63, 63); height: 35px; width: 450px; margin-top: 10px; } .tree-branch.ui-sortable-helper .contents { margin-top: 0; } .tree-branch.ui-sortable-helper .children-bus .contents { margin-top: 10px; } .tree-branch .children-bus:empty { display: none; } .branch-level-1 { margin-left: 0px; } .branch-level-2 { margin-left: 30px; } .branch-level-3 { margin-left: 60px; } .branch-level-4 { margin-left: 90px; } .branch-level-5 { margin-left: 120px; } .branch-level-6 { margin-left: 150px; } .branch-level-7 { margin-left: 180px; } .branch-level-8 { margin-left: 210px; } .branch-level-9 { margin-left: 240px; } .branch-level-10 { margin-left: 270px; } .branch-level-1 .children-bus { margin-left: 0px; } .branch-level-2 .children-bus { margin-left: -30px; } .branch-level-3 .children-bus { margin-left: -60px; } .branch-level-4 .children-bus { margin-left: -90px; } .branch-level-5 .children-bus { margin-left: -120px; } .branch-level-6 .children-bus { margin-left: -150px; } .branch-level-7 .children-bus { margin-left: -180px; } .branch-level-8 .children-bus { margin-left: -210px; } .branch-level-9 .children-bus { margin-left: -240px; } .branch-level-10 .children-bus { margin-left: -270px; }
4. Default plugin options.
options: { depth: 30, treeSelector: '#tree', branchSelector: '.tree-branch', dragHandlerSelector: '.branch-drag-handler', placeholderName: 'sortable-placeholder', childrenBusSelector: '.children-bus', levelPrefix: 'branch-level-', maxLevel: 10, },
See Demo And Download
Official Website(ahamed): Click Here
This superior jQuery/javascript plugin is developed by ahamed. For extra advanced usage, please go to the official website.