如何从div中拖动节点并将其放到JStree上? (jstree版本:3.0.4)

时间:2014-10-29 07:27:47

标签: jquery jstree

使用以下代码,我可以拖动一个JSTree节点并将其放到div上,然后,该节点将从jstree中删除。 我将所有已删除的jstree节点存储在mapOfRemovedNodes对象中,其中node id为KEY,节点对象本身为VALUE。 现在,我想将节点移回JSTree。 这是我的完整代码:

<!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>

假设我必须从div中拖出一个节点并将其放在jstree上的任何位置。 在这里,我如何将节点从div移动到jstree并将其放置在其父节点下的正确层次结构中?

1 个答案:

答案 0 :(得分:3)

得到了解决方案!!发表我的答案,因为这可能对面临类似问题的其他人有用。

<!doctype html> 
<head>
    <title>JSTree</title>
    <link rel="stylesheet" href="css/style_jstree.css" />
    <link href="fonts/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 arrayCollection;
        $(function() {
            arrayCollection = [
                {"id": "animal", "parent": "#", "text": "Animals", "data": {"name": "Quick"}},
                {"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", "data": {"lastName": "Silver"}},
                {"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,
                        'responsive': true
                    }
                },
                "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) {
                if (data.event.target.id === 'dragTarget') {

                    var jsonElement;

                    var nodeDragged = $(data.element).clone();
                    // $('#dragTarget').append(nodeDragged);
                    if (data.data.jstree && data.data.origin)
                    {
                        jsonElement = data.data.origin.get_node(data.element);

                        var id = jsonElement.id;
                        var icon = jsonElement.icon;
                        var parent = jsonElement.parent;
                        var parents = jsonElement.parents.join();
                        var text = jsonElement.text;

                        var divElement = '<div data-id=\'' + id + '\' data-text=\'' + text + '\' data-icon=\'' + icon + '\' data-parent=\'' + parent + '\' draggable=true><i class=\'' + icon + '\'></i>&nbsp' + text + '</div>';
                        $('#dragTarget').append(divElement);

                        arrayCollection = arrayCollection
                                .filter(function(el) {
                                    return el.id !== id;
                                });

                        resfreshJSTree();

                    }

                }
            });
        });

        function resfreshJSTree() {
            $('#jstree').jstree(true).settings.core.data = arrayCollection;
            $('#jstree').jstree(true).refresh();
        }


    </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>

        var draggedDivElement;

        document.getElementById('dragTarget').addEventListener('dragstart', function(evt) {
            console.log("The 'dragstart' event fired.");
            var jsonElement = new Object();
            var divElement = evt.target;
            jsonElement.id = divElement.getAttribute('data-id');
            jsonElement.text = divElement.getAttribute('data-text');
            jsonElement.icon = divElement.getAttribute('data-icon');
            jsonElement.parent = divElement.getAttribute('data-parent');
            evt.dataTransfer.setData('jsonElement', JSON.stringify(jsonElement));
            draggedDivElement = divElement;
        }, 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. 
            arrayCollection.push(JSON.parse(evt.dataTransfer.getData('jsonElement')));
            resfreshJSTree();
            if(draggedDivElement!==null){
                draggedDivElement.innerHTML = '';
            }            
        }, false);

    </script>
</body>
</html>