问题
Using the following code, I could drag a JSTree node and drop it on to a div, and after that, the node would be deleted from the jstree. I am storing all the removed jstree nodes in mapOfRemovedNodes object, where node id is KEY and the node object itself is VALUE. Now, I want to move the node back to the JSTree. This is my complete 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>
Let's say I have to drag a node from the div and drop it anywhere on to the jstree. Here, How could I move the node from div to jstree and place it in proper hierarchy exactly under its parent node?
回答1:
Got the solution!! Posting my answer, as this might be useful for others who are facing similar kind of issues.
<!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> ' + 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>
来源：https://stackoverflow.com/questions/26624813/how-to-drag-a-node-from-a-div-and-drop-it-on-to-a-jstree-jstree-version-3-0-4