new mar10.Wunderbaum({

    id: "demo",

    element: document.getElementById("demo-tree"),

    // header: "Plain Tree",

    source: {

        children: [

            { title: "1", expanded: true, children: [{ title: "1.1" }, { title: "1.2" }] },

            { title: "2", lazy: true },

            { title: "3", lazy: true },

​

        ]

    },

    debugLevel: 5,

    // checkbox: true,

    // minExpandLevel: 1,

    types: {},

​

    init: (e) => {

        // Tree was loaded and rendered. Now set focus:

        // const node = e.tree.findFirst("Jumping dopily");

        // node.setActive();

        e.tree.setFocus();

    },

    dnd: {

        dragStart: (e) => {

            if (e.node.type === "folder") {

                return false;

            }

            e.event.dataTransfer.effectAllowed = "all";

            return true;

        },

        dragEnter: (e) => {

            if (e.node.type === "folder") {

                e.event.dataTransfer.dropEffect = "copy";

                return "over";

            }

            return ["before", "after"];

        },

        drop: (e) => {

            console.log(

                `Drop ${e.sourceNode} => ${e.suggestedDropEffect} ${e.suggestedDropMode} ${e.node}`,

                e

            );

            e.sourceNode.moveTo(e.node, e.suggestedDropMode);

        },

    },

​

    lazyLoad: (e) => {

        console.log(e.type, e);

        // simulate async loading

        return e.util.setTimeoutPromise(() => {

            return [

                { title: "2.1" },

                { title: "2.2" },

                { title: "2.3" },

            ]

        }, 5000);

    },

    beforeExpand: (e) => {

        console.log(e.type, e);

        // return false; // cancel expand

    },

    expand: (e) => {

        console.log(e.type, e);

        if (e.node.isLazy() && !e.flag) {

            e.node.resetLazy(); // remove children on collapse

        }

    },

});