jstree inline HTML demo

by Ivan Bozhanov

HTML

<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css">
<div id="container">
  <ul>
    <li>Root node
      <ul>
        <li>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>

JavaScript

$('#container').jstree({
  "core" : {
    "check_callback" : function (operation, node, parent, position, more) {
      if(operation === "copy_node" || operation === "move_node") {
        if(parent.id === "#") {
          return false; // prevent moving a child above or below the root
        }
      }
      return true; // allow everything else
    }
  },
  "plugins" : ["dnd","contextmenu"]
});