JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id='tree'>
<ul>
<li>
<a href='#'>Red Audience</a>
</li>
<li>
<a href='#'>Green Audience</a>
</li>
<li>
<a href='#'>Blue Audience</a>
</li>
</ul>
</div>
CSS
.move {
cursor:move;
}
JavaScript
// jsTree prototyping
$(document).ready(function() {
function customMenu(node) {
var items = jQuery.jstree.defaults.contextmenu.items;
items.create.icon = 'http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/source/themes/default/create.png';
items.create.submenu = {
createChild: {
label: "Create Child",
action: items.create.action
},
createSibling: {
label: "Create Sibling",
action: function() {
$("#tree").jstree("create", node, "before", "New node");
}
},
createParent: {
label: "Create Parent",
action: function() {
var newParent = $("#tree").jstree("create", node, "before", "New node");
$("#tree").jstree("move_node", node, newParent, 'first');
}
}
};
items.remove.icon = 'http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/source/themes/default/remove.png';
items.rename.icon = 'http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/source/themes/default/rename.png';
return items;
}
$('#tree').bind("before.jstree", function(e, data) {
console.log(data.func);
if (data.func == 'start_drag') {
$('#tree a').addClass('move');
}
if (data.func == 'deselect_all' || data.func == 'move_node') {
$('#tree a').removeClass('move');
}
}).jstree({
"plugins": ["themes", "html_data", "dnd", "checkbox", "crrm", "contextmenu", 'ui'],
checkbox: {
two_state: true
},
contextmenu: {
items: customMenu
},
core: {
initially_open: ['root']
}
});
});