jQuery Plugin for Nested Sortable List Also Tree Structures

How to make use of it:

1. Include the jQuery Sortable Lists plugin in your challenge.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- For Desktop -->
<script src="/path/to/jquery-sortable-lists.min.js"></script>
<!-- For Mobile -->
<script src="/path/to/jquery-sortable-lists-mobile.min.js"></script>

$('#selector').sortableLists(options);

2. Create nested HTML lists for the hierarchical tree.

<ul class="sTree-example listsClass" id="sTree-example">
  <li id="item_a" data-module="a">
    <div>Item a</div>
  </li>
  <li class="s-l-open" id="item_b" data-module="b">
    <div>Item b</div>
    <ul class="">
      <li id="item_b1" data-module="b">
        <div>Item b1</div>
      </li>
      <li id="item_b2" data-module="b">
        <div><span class="clickable">Item b2 - clickable text</span></div>
      </li>
      <li id="item_b3" data-module="b">
        <div>Item b3</div>
      </li>
      <li id="item_b4" data-module="b">
        <div>Item b4</div>
      </li>
      <li id="item_b5" data-module="b">
        <div>Item b5</div>
      </li>
    </ul>
  </li>
  <li class="" id="item_c" data-module="c">
    <div>Item c - c block disallows inserting items from other blocks</div>
    <ul class="">
      <li id="item_c1" data-module="c">
        <div>Item c1</div>
      </li>
      <li id="item_c2" data-module="c">
        <div>Item c2</div>
      </li>
      <li id="item_c3" data-module="c">
        <div>Item c3</div>
      </li>
      <li id="item_c4" data-module="c">
        <div>Item c4</div>
      </li>
      <li id="item_c5" data-module="c">
        <div>Item c5</div>
      </li>
    </ul>
  </li>
  <li class="" id="item_d" data-module="d">
    <div>Item d</div>
    <ul class="">
      <li id="item_d1" data-module="d">
        <div>Item d1</div>
      </li>
      <li id="item_d2" data-module="d">
        <div>Item d2</div>
      </li>
      <li id="item_d3" data-module="d">
        <div>Item d3</div>
      </li>
      <li id="item_d4" data-module="d">
        <div>Item d4</div>
      </li>
      <li id="item_d5" data-module="d">
        <div>Item d5</div>
      </li>
    </ul>
  </li>
  <li class="" id="item_e" data-module="e">
    <div>Item e</div>
  </li>
  <li class="" id="item_f" data-module="f">
    <div>Item f</div>
  </li>
</ul>

3. Initialize the plugin with a number of choices.

$('#sTree-example').sortableLists({
  placeholderCss: {'background-color': '#ff8'},
  hintCss: {'background-color':'#bbf'},
  opener: {
    active: true,
    as: 'html',  // if as is not set plugin uses background image
    close: '<i class="fa fa-minus c3"></i>',  // or 'fa-minus c3',  // or './imgs/Remove2.png',
    open: '<i class="fa fa-plus"></i>',  // or 'fa-plus',  // or'./imgs/Add2.png',
    openerCss: {
      'display': 'inline-block',
      'float': 'left',
      'margin-left': '-35px',
      'margin-right': '5px',
      'font-size': '1.1em'
    }
  },
  ignoreClass: 'clickable'
});

4. All default options and callback functions.

currElClass: '',
placeholderClass: '',
placeholderCss: {
  'position': 'relative',
  'padding': 0
},
hintClass: '',
hintCss: {
  'display': 'none',
  'position': 'relative',
  'padding': 0
},
hintWrapperClass: '',
hintWrapperCss: { /* Description is below the defaults in this var section */ },
baseClass: '',
baseCss: {
  'position': 'absolute',
  'top': 0 - parseInt( jQBody.css( 'margin-top' ) ),
  'left': 0 - parseInt( jQBody.css( 'margin-left' ) ),
  'margin': 0,
  'padding': 0,
  'z-index': 2500
},
opener: {
  active: false,
  open: '',
  close: '',
  openerCss: {
    'float': 'left',
    'display': 'inline-block',
    'background-position': 'center center',
    'background-repeat': 'no-repeat'
  },
  openerClass: ''
},
maxLevels: false,
listSelector: 'ul',
listsClass: '', // Used for hintWrapper and baseElement
listsCss: {},
insertZone: 50,
insertZonePlus: false,
scroll: 20,
ignoreClass: '',
isAllowed: function( cEl, hint, target ) { return true; },  // Params: current el., hint el.
onDragStart: function( e, cEl ) { return true; },  // Params: e jQ. event obj., current el.
onChange: function( cEl ) { return true; },  // Params: current el.
complete: function( cEl ) { return true; }  // Params: current el.

5. Export the present data as Array/String/Hierarchy.

$('#sTree-example').sortableListsToArray();
$('#sTree-example').sortableListsToHierarchy();
$('#sTree-example').sortableListsToString();

Sortable and Collapsible Tree View Plugin, jquery sortable lists Github, jquery treeview dynamically add nodes, jquery treeview example code

See Demo And Download