Fancytree DnD

by bizamajig

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.fancytree/2.17.0/skin-win8/ui.fancytree.min.css">
<script src="https://cdn.jsdelivr.net/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fancytree/2.17.0/jquery.fancytree-all.min.js"></script>
<h1>
Fancee Tree DnD example
</h1>

<p>
  <input id="search" placeholder="Filter..." autocomplete="off">
</p>
  
<div id="tree"></div>

<p>
  <button id="button1">button1</button>
  <button id="button2">button2</button>
</p>

JavaScript

;
jQuery(function($) {
  var source = [{
    "title": "folder",
    "path": "/",
    "expanded": true,
    "folder": true,
    "key": "Mm45ftEsHnAKbLuZ2",
    "class": "asdf",
    "children": [{
      "title": "2",
      "path": "/2",
      "parent": "Mm45ftEsHnAKbLuZ2",
      "folder": true,
      "key": "gCkLKPpDe2NXix2Jo",
      "class": "asdf",
      "children": [{
        "title": "1.txt",
        "path": "/2/1.txt",
        "parent": "gCkLKPpDe2NXix2Jo",
        "folder": false,
        "key": "HyBdfd7Lmxukbwe4H",
        "class": "asdf"
      }, {
        "title": "file1.txt",
        "path": "/2/file1.txt",
        "parent": "gCkLKPpDe2NXix2Jo",
        "folder": false,
        "key": "NdeXwsNMg9gbTvKc5",
        "class": "asdf"
      }]
    }, {
      "title": "folder1",
      "path": "/folder1",
      "parent": "Mm45ftEsHnAKbLuZ2",
      "folder": true,
      "key": "bssLetiKQHQtQfcAS",
      "class": "asdf",
      "children": [{
        "title": ".file.txt",
        "path": "/folder1/.file.txt",
        "parent": "bssLetiKQHQtQfcAS",
        "folder": false,
        "key": "X7fHghMtoXEM6Qtcj",
        "class": "asdf"
      }, {
        "title": "1.txt",
        "path": "/folder1/1.txt",
        "parent": "bssLetiKQHQtQfcAS",
        "folder": false,
        "key": "bWMMfYDC5a2cEaBqx",
        "class": "asdf"
      }, {
        "title": "file1.txt",
        "path": "/folder1/file1.txt",
        "parent": "bssLetiKQHQtQfcAS",
        "folder": false,
        "key": "Nqi4QAntSHScbP37e",
        "class": "asdf"
      }, {
        "title": "file2.txt",
        "path": "/folder1/file2.txt",
        "parent": "bssLetiKQHQtQfcAS",
        "folder": false,
        "key": "zn6mjjJGnG62CuJCd",
        "class": "asdf"
      }, {
        "title": "file3.txt",
        "path": "/folder1/file3.txt",
        "parent": "bssLetiKQHQtQfcAS",
        "folder": false,
        "key": "kGhbskoGLsc9pvHuj",
        "class": "asdf"
      }]
    }, {
      "title": "folder2",
   ...