Wie ziehe ich einen Knoten von einem div auf einen JStree? (jstree version: 3.0.4)

Question

Oct 29, 2014, 08:27 AM

Wie ziehe ich einen Knoten von einem div auf einen JStree? (jstree version: 3.0.4)

Mit dem folgenden Code könnte ich einen JSTree-Knoten auf ein div ziehen und dort ablegen. Danach würde der Knoten aus dem jstree gelöscht. Ich speichere alle entfernten jstree-Knoten im mapOfRemovedNodes-Objekt, wobei die Knoten-ID KEY und das Knotenobjekt selbst VALUE ist. Jetzt möchte ich den Knoten wieder in den JSTree verschieben. Das ist mein vollständiger Code:

<!doctype html> 
<head>
    <title>JSTree</title>
    <link rel="stylesheet" href="css/style.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/jstree.js"></script>
    <script>
        var mapOfRemovedNodes = new Object();
        $(function() {
            var arrayCollection = [
                {"id": "animal", "parent": "#", "text": "Animals"},
                {"id": "device", "parent": "#", "text": "Devices"},
                {"id": "dog", "parent": "animal", "text": "Dogs", "icon": "fa fa-file-o"},
                {"id": "lion", "parent": "animal", "text": "Lions", "icon": "fa fa-file-o"},
                {"id": "mobile", "parent": "device", "text": "Mobile Phones", "icon": "fa fa-file-o"},
                {"id": "lappy", "parent": "device", "text": "Laptops", "icon": "fa fa-file-o"},
                {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "fa fa-long-arrow-right"},
                {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "fa fa-long-arrow-right"},
                {"id": "african", "parent": "lion", "text": "African Lion", "icon": "fa fa-long-arrow-right"},
                {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "fa fa-long-arrow-right"},
                {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "fa fa-long-arrow-right"},
                {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "fa fa-long-arrow-right"},
                {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "fa fa-long-arrow-right"},
                {"id": "hp", "parent": "lappy", "text": "HP", "icon": "fa fa-long-arrow-right"}
            ];
            $('#jstree').jstree({
                "plugins": ["dnd", "types"],
                'core': {
                    'check_callback': true,
                    'data': arrayCollection,
                    'themes': {
                        'dots': false
                    }
                },
                "types": {
                    "root": {
                        "icon": "/static/3.0.8/assets/images/tree_icon.png",
                        "valid_children": ["default"]
                    },
                    "default": {
                        "valid_children": ["default", "file"]
                    },
                    "file": {
                        "icon": "fa fa-file-o",
                        "valid_children": []
                    }
                }
            });
            $(document).on('dnd_start.vakata', function(e, data) {
                console.log('Started dragging node from jstree');
            });
            $(document).on('dnd_move.vakata', function(e, data) {
                console.log('Moving node from jstree to div');
            });
            $(document).on('dnd_stop.vakata', function(e, data) {
                console.log('Dropped the node on to the div');
                if (data.event.target.id === 'dragTarget') {
                    var nodeDragged = $(data.element).clone();
                    $('#dragTarget').append(nodeDragged);
                    var ref = $('#jstree').jstree(true);
                    var nodeToDelete = $('#' + data.data.nodes[0]);
                    mapOfRemovedNodes[data.data.nodes[0]] = nodeToDelete.clone(); // including the clone of the node in a map
                    ref.delete_node(nodeToDelete); // deleting the node on jstree after dropping it on to the div
                    console.log(getRemovedNode(data.data.nodes[0]));
                }
            });
        });

        function getRemovedNode(key) {
            return mapOfRemovedNodes[key];
        }


    </script>
</head>
<body>
    <div id="jstree" style="float: left; width: 500px"></div>
    <div id="dragTarget" style="float: left; width: 750px; height: 750px; background-color: skyblue; text-align: center">
        <h3>Dropped Items</h3>
    </div>
    <script>
        document.getElementById('dragTarget').addEventListener('dragstart', function(evt) {
            console.log("The 'dragstart' event fired.");
            console.log(evt.target);
            evt.dataTransfer.setData('text', evt.target.textContent);
        }, false);

        document.addEventListener("dragover", function(evt) {
            console.log("The 'dragover' event fired.");
            evt.preventDefault(); // Prevent the default behavior in order to enable dropping.
        }, false);

        document.getElementById('jstree').addEventListener("drop", function(evt) {
            console.log("The 'drop' event on jsTree fired.");
            evt.preventDefault(); // Prevent the default action to open as link for some elements. 
            console.log(evt);
            //
            // To do: How to drop the node (dragged from div) to jstree structure??
            //
        }, false);
    </script>
</body>
</html>

Angenommen, ich muss einen Knoten aus dem div ziehen und irgendwo in den jstree ablegen. Wie könnte ich den Knoten von div nach jstree verschieben und in der richtigen Hierarchie genau unter dem übergeordneten Knoten platzieren?