jQuery Drag and Drop Treeview Plugin

The “sortable-lists” jQuery plugin helps you to create a drag and drop treeview structure. Basically, the plugin sorts the HTML lists in the hierarchy order with mouse dragging. The lists can be nested up to many levels and can be styled like a treeview with CSS.

With the help of this jQuery plugin, you can easily display hierarchical data in sortable lists. Each item can be dragged into another item along with a callback function. Besides the mouse dragging, the plugin also supports mobile touch dragging (feature in separated “jquery-sortable-lists-mobile.js” file). Moreover, the plugin has a built-in export function to export lists to an array, to hierarchy, and into a string.

The plugin comes with multiple configuration options to highly customize its performance. You can set max levels number, control dragging speed, and execute custom callback functions on JavaScript events like onDragStart and complete, etc.

How to Create Sortable Drag & Drop Treeview

In order to build a sortable drag and drop treeview structure, create nested HTML lists with the following mentioned classes and ids. Wrap these lists into a div container and define its class name "treeview". We’ll use these class selectors to style like a hierarchy structure in the CSS.

<div class="treeview">
   <ul class="sTree bgC4" id="sTree2">
      <li class="bgC4" id="item_a">
         <div>Item a</div>
      </li>
      <li class="bgC4" id="item_b">
         <div>Item b</div>
      </li>
      <li class="bgC4 sortableListsClose" id="item_c">
         <div><span class="sortableListsOpener"> </span>Item c</div>
         <ul class="">
            <li class="bgC4" id="item_1">
               <div>Item 1</div>
            </li>
            <li class="bgC4" id="item_2">
               <div>Item 2</div>
            </li>
            <li class="bgC4" id="item_3">
               <div>Item 3</div>
            </li>
            <li class="bgC4" id="item_4">
               <div>Item 4</div>
            </li>
            <li class="bgC4" id="item_5">
               <div>Item 5</div>
            </li>
         </ul>
      </li>
      <li class="bgC4 sortableListsClose" id="item_d">
         <div><span class="sortableListsOpener"> </span>Item c</div>
         <ul class="">
            <li class="bgC4" id="item_1">
               <div>Item 1</div>
            </li>
            <li class="bgC4" id="item_2">
               <div>Item 2</div>
            </li>
            <li class="bgC4" id="item_3">
               <div>Item 3</div>
            </li>
            <li class="bgC4" id="item_4">
               <div>Item 4</div>
            </li>
            <li class="bgC4" id="item_5">
               <div>Item 5</div>
            </li>
         </ul>
      </li>
      <li class="bgC4 sortableListsClose" id="item_e">
         <div><span class="sortableListsOpener"> </span>Item c</div>
         <ul class="">
            <li class="bgC4" id="item_1">
               <div>Item 1</div>
            </li>
            <li class="bgC4" id="item_2">
               <div>Item 2</div>
            </li>
            <li class="bgC4" id="item_3">
               <div>Item 3</div>
            </li>
            <li class="bgC4" id="item_4">
               <div>Item 4</div>
            </li>
            <li class="bgC4" id="item_5">
               <div>Item 5</div>
            </li>
         </ul>
      </li>
   </ul>
</div>

We’ll display a plus icon with the parent list and toggle this icon when sublists displayed. Basically, the “sortable-lists” plugin allows you to add custom open and close icons whether in the image or iconic format. So, in order to use font icons, add the Font Awesome iconic CSS library into the head section of your HTML document.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Now, style the HTML lists with CSS. You can set the custom values for margin, padding, and background color according to your needs. A very basic CSS style for treeview structure is as follows:

.treeview ul,
.treeview li {
	list-style-type: none;
	padding: 3px;
	color: #fff;
	border: 1px solid #000;
}

.treeview ul {
	padding: 10px;
}

.treeview ul li {
	padding-left: 50px;
	margin: 10px 0;
	border: 1px solid #000;
}

.treeview li div {
	padding: 7px;
	background-color: #D870A9;
	border: 1px solid #000;
}

.treeview li,
ul,
div {
	border-radius: 3px;
}

.scrollUp {
	position: fixed;
	top: 0;
	left: 0;
	height: 48px;
	width: 50px;
	border: 1px solid red;
}

.scrollDown {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 48px;
	width: 50px;
	border: 1px solid red;
}

.sortableListsClose ul,
.sortableListsClose ol {
	display: none;
}

.red {
	background-color: #ff9999;
}

.blue {
	background-color: #D870A9;
}

.green {
	background-color: #99ff99;
}

.pV10 {
	padding-top: 10px;
	padding-bottom: 10px;
}

.dN {
	display: none;
}

.zI1000 {
	z-index: 1000;
}

.bgC1 {
	background-color: #ccc;
}

.bgC2 {
	background-color: #ff8;
}

.bgC3 {
	background-color: #f0f;
}

.bgC4 {
	background-color: #ED87BD;
}

.small1 {
	font-size: 0.8em;
}

.small2 {
	font-size: 0.7em;
}

.small3 {
	font-size: 0.6em;
}

#sTreeBase {
	width: 100px;
	height: 50px;
	background-color: blue;
}

#text {
	padding: 10px 0;
}

#sTree {
	background-color: green;
}

#sTree2 {
	margin: 10px 0;
}

#center {
	width: 950px;
	margin: 0 auto;
	padding: 10px;
}

After styling the lists, its time to integrate the sortable-lists plugin. So, add the jQuery (by CDN link) and plugin file (from the downloaded directory) just before the closing of the body tag.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Sortable Lists JS -->
<script src="js/jquery-sortable-lists.js"></script>

Finally, initialize the plugin with the following mentioned configuration options. The purpose of each option is described with comment. So, customize them according to your needs.

    $(function()
    {
      var options = {
        placeholderCss: {'background-color': '#ff8'},
    hintCss: {'background-color':'#bbf'},
    onChange: function( cEl )
    {
      console.log( 'onChange' );
    },
    complete: function( cEl )
    {
      console.log( 'complete' );
    },
    isAllowed: function( cEl, hint, target )
    {
      // Be carefull if you test some ul/ol elements here.
      // Sometimes ul/ols are dynamically generated and so they have not some attributes as natural ul/ols.
      // Be careful also if the hint is not visible. It has only display none so it is at the previouse place where it was before(excluding first moves before showing).
      if( target.data('module') === 'c' && cEl.data('module') !== 'c' )
      {
        hint.css('background-color', '#ff9999');
        return false;
      }
      else
      {
        hint.css('background-color', '#99ff99');
        return true;
      }
    },
    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',
        //'width': '18px', 'height': '18px',
        'float': 'left',
        'margin-left': '-35px',
        'margin-right': '5px',
        //'background-position': 'center center', 'background-repeat': 'no-repeat',
        'font-size': '1.1em'
      }
    },
    ignoreClass: 'clickable'
      };
      $('#sTree2').sortableLists(options);

      console.log($('#sTree2').sortableListsToArray());
      console.log($('#sTree2').sortableListsToHierarchy());
      console.log($('#sTree2').sortableListsToString());
    });

That’s all! we hope you like this jQuery plugin to build a drag and drop treeview navigation. If you have any questions or need further help, let us know by comment below.