如何将节点从div拖放到JStree? (jstree版本:3.0.4) [英] How to drag a node from a div and drop it on to a JStree? (jstree version: 3.0.4)
本文介绍了如何将节点从div拖放到JStree? (jstree版本:3.0.4)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用以下代码，我可以将JSTree节点拖放到div上，然后，该节点将从jstree中删除. 我将所有已删除的jstree节点存储在mapOfRemovedNodes对象中，其中节点ID为KEY，而节点对象本身为VALUE. 现在，我想将节点移回JSTree. 这是我完整的代码:
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>
比方说，我必须将节点从div拖放到jstree上的任何位置. 在这里，如何将节点从div移到jstree并将其放置在父节点正下方的适当层次结构中?
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?
推荐答案
解决了！！发布我的答案，因为这对于面临类似问题的其他人可能很有用.
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>
这篇关于如何将节点从div拖放到JStree? (jstree版本:3.0.4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
