JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathway Builder 3.0</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="js/basic.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
</head>
<body>
<ul id="org" style="display: none;">
<li>
Food
<br /><input type="button" class="add_child" value="+" />
<ul>
<li>
Fruit
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
</ul>
</li>
</ul>
<div></div>
</body>
</html>
CSS
/* Basic styling */
/* Draw the lines */
.jOrgChart .line {
height : 20px;
width : 4px;
}
.jOrgChart .down {
background-color : black;
margin : 0px auto;
}
.jOrgChart .top {
border-top : 3px solid black;
}
.jOrgChart .left {
border-right : 2px solid black;
}
.jOrgChart .right {
border-left : 2px solid black;
}
/* node cell */
.jOrgChart td {
text-align : center;
vertical-align : top;
padding : 0;
}
/* The node */
.jOrgChart .node {
background-color : #35363B;
display : inline-block;
width : 96px;
height : 60px;
z-index : 10;
margin : 0 2px;
}
/* jQuery drag 'n drop */
.drag-active {
border-style : dotted !important;
}
.drop-hover {
border-style : solid !important;
border-color : #E05E00 !important;
}
JavaScript
/**
* jQuery org-chart/tree plugin.
*
* Author: Wes Nolte
* http://twitter.com/wesnolte
*
* Based on the work of Mark Lee
* http://www.capricasoftware.co.uk
*
* Copyright (c) 2011 Wesley Nolte
* Dual licensed under the MIT and GPL licenses.
*
*/
(function($) {
$.fn.jOrgChart = function(options) {
var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
var $appendTo = $(opts.chartElement);
// build the tree
$this = $(this);
var $container = $("<div class='" + opts.chartClass + "'/>");
if ($this.is("ul")) {
buildNode($this.find("li:first"), $container, 0, opts);
}
else if ($this.is("li")) {
buildNode($this, $container, 0, opts);
}
$appendTo.append($container);
// add drag and drop if enabled
if (opts.dragAndDrop) {
$('div.node').draggable({
cursor: 'move',
distance: 40,
helper: 'clone',
opacity: 0.8,
revert: true,
revertDuration: 100,
snap: 'div.node.expanded',
snapMode: 'inner',
stack: 'div.node'
});
$('div.node').droppable({
accept: '.node',
activeClass: 'drag-active',
hoverClass: 'drop-hover'
});
// Drag start event handler for nodes
$('div.node').bind("dragstart", function handleDragStart(event, ui) {
var sourceNode = $(this);
sourceNode.parentsUntil('.node-container').find('*').filter('.node').droppable('disable');
});
// Drag stop event handler for nodes
$('div.node').bind("dragstop", function handleDragStop(event, ui) {
/* reload the plugin */
//mharris note: meaning to visually reload
$(opts.chartElement).children().remove();
...