JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<link rel="stylesheet" href="http://static.jstree.com/v.1.0pre/themes/default/style.css">
<script src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="tree">
</div>

JavaScript

function buildTree(id, tree) {
	var element = $(id);
	element.hide();

	var list = $('<ul></ul>');
	appendNode(list, tree.apex);
	element.append(list);
	element.jstree({
		"plugins" : [ "themes", "html_data", "dnd" ],
		"core" : {
			animation : 50,
		},
		"dnd": {
			"drop_finish" : function () { 
				alert("DROP"); 
			},
			"drag_check" : function (data) {
				return { 
					after : false, 
					before : false, 
					inside : true 
				};
			},
			"drag_finish" : function (data) { 
				alert("DRAG OK"); 
			}			
		}
	});
	
	setTimeout(function(){element.show()}, 50);
}

function appendNode(list, node) {
	var html = '<a href="#" id="' + node.gciNumber + '">' + node.legalName + '</a>';

	var item = $('<li id="' + node.gciNumber + '">' + html + '</li>');

	if (node.children && node.children.length > 0) {
		var subList = $('<ul></ul>');

		for ( var i = 0; i < node.children.length; i++) {
			appendNode(subList, node.children[i]);
		}

		item.append(subList);
	}

	list.append(item);
}

var tree = {"apex":{"gciNumber":"G0038237","legalName":"Big Corp LLC Family Tree Apex","children":[{"gciNumber":"G0038220","legalName":"Big Corp LLC [Level 1, #04]","children":[{"gciNumber":"G0038222","legalName":"Big Corp LLC [Level 2, #04]","children":[{"gciNumber":"G0038281","legalName":"Big Corp LLC [Level 3, #02]","children":[]},{"gciNumber":"G0038282","legalName":"Big Corp LLC [Level 3, #05]","children":[]},{"gciNumber":"G0038286","legalName":"Big Corp LLC [Level 3, #03]","children":[{"gciNumber":"G0038519","legalName":"Big Corp LLC [Level 4, #02]","children":[]},{"gciNumber":"G0038529","legalName":"Big Corp LLC [Level 4, #03]","children":[]}]},{"gciNumber":"G0038287","legalName":"Big Corp LLC [Level 3, #04]","children":[{"gciNumber":"G0038520","legalName":"Big Corp LLC [Level 4, #02]","children":[]},{"gciNumber":"G0038521","legalName":"Big Corp LLC [Level 4, #03]","children":[]},{"gciNumber":"G0038522","legalName":"Big Corp LLC [Level 4,...