jQuery Plugin for Nested Sortable List Also Tree Structures

jquery nested sortable list also added to sort lists tree structures that enable items in the list to be sorted vertically through drag-and-drop or touch gestures. Supports nested menus which allow collapse/expand menu items such as tree structure.

jquery nested sortable list example, create dynamic tree view using jquery, jquery hierarchy tree example, treeview jquery, treeview with search jquery, sortable tree jquery

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>

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 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 id="item_b2" data-module="b">
        <div><span class="clickable">Item b2 - clickable text</span></div>
      <li id="item_b3" data-module="b">
        <div>Item b3</div>
      <li id="item_b4" data-module="b">
        <div>Item b4</div>
      <li id="item_b5" data-module="b">
        <div>Item b5</div>
  <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 id="item_c2" data-module="c">
        <div>Item c2</div>
      <li id="item_c3" data-module="c">
        <div>Item c3</div>
      <li id="item_c4" data-module="c">
        <div>Item c4</div>
      <li id="item_c5" data-module="c">
        <div>Item c5</div>
  <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 id="item_d2" data-module="d">
        <div>Item d2</div>
      <li id="item_d3" data-module="d">
        <div>Item d3</div>
      <li id="item_d4" data-module="d">
        <div>Item d4</div>
      <li id="item_d5" data-module="d">
        <div>Item d5</div>
  <li class="" id="item_e" data-module="e">
    <div>Item e</div>
  <li class="" id="item_f" data-module="f">
    <div>Item f</div>

3. Initialize the plugin with a number of choices.

  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.


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

See Demo And Download

Official Website(camohub): Click Here

This superior jQuery/javascript plugin is developed by camohub. For extra Advanced Usages, please go to the official website.

Leave a Comment