如何从div拖动节点并将其放到JStree上？ （jstree版本：3.0.4）

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

        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]; }    
 
 
Dropped Items
 
  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);    

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

Answer 1

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

           
 
 
Dropped Items