Drag & Drop Enabled jQuery Tree View Plugin – OrgCharts

OrgCharts is a lightweight and easy to use jQuery plugin that allows you to create structures with nested elements tree view chart. Just add the nested elements with simple <ul>, <li> structure and it will automatically convert this to <table> structure and rendered within the page perfectly. Also supported drag and drop features, you will just need to enable it.

Features:

• Lightweight and very easy to use.
• Supported tree view within nested elements.
• Included drag and drop features.
• Style can be modified easily with CSS.
• Showing/hiding a particular branch of the tree by clicking on the respective node.

How to use it:

1. Include the Javascript jquery.jOrgChart.js at the bottom of the web page.

<script src="path/to/jquery.jOrgChart.js"></script>

2. Include the CSS jquery.jOrgChart.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.jOrgChart.css">

Include jQuery UI for Drag and Drop features.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

3. Add the basic HTML to the page.

<ul id="org" style="display:none">
  <li>
    Food
    <ul>
      <li id="beer">Beer</li>
      <li>Vegetables
        <a href="#" target="_blank">Click me</a>
        <ul>
          <li>Pumpkin</li>
          <li>
             <a href="#" target="_blank">Aubergine</a>
             <p>A link and paragraph.</p>
          </li>
        </ul>
      </li>
      <li class="fruit">Fruit
        <ul>
          <li>Apple
            <ul>
              <li>Granny Smith</li>
            </ul>
          </li>
          <li>Berries
            <ul>
              <li>Blueberry</li>
              <li><img src="../assets/images/berry.jpg" alt="Raspberry"/></li>
              <li>Cucumber</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Bread</li>
      <li class="collapsed">Chocolate
        <ul>
          <li>Topdeck</li>
          <li>Reese's Cups</li>
        </ul>
      </li>
    </ul>
  </li>
  </ul>

<div id="chart" class="orgChart"></div>

4. Initialize the plugin and we’re ready to go.

jQuery(document).ready(function() {
  $("#org").jOrgChart({
    chartElement : '#chart'
  });
});

Plugin’s default options: