将节点从一个 jstree 移动到另一个 jstree 不起作用
Moving node from one jstree to another jstree not working
假设我们有2个jstree实例。这里 n1, n2
来自第一棵树的节点和来自第二棵树的 n3, n4
节点。我想 move/drag n4 内的 n2 节点。
但似乎 move_node
方法在不同树实例上移动节点时不会触发。
$('#A').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 1","id":"n1"}, {"text":"Root 2","id":"n2"}]
},
plugins:['dnd'],
});
$('#B').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 3","id":"n3"}, {"text":"Root 4","id":"n4"}]
},
plugins:['dnd'],
});
//setTimeout(function () {
var a = $('#A').on('move_node.jstree', function(e, data) {
console.log('move success');
});
var b = $('#B').on('move_node.jstree', function(e, data) {
console.log('move success');
});
//}, 500);
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script>
<div id="A"></div>
<div id="B"></div>
是否可以在不同的 jstree 实例中拖放节点?
这是fiddle
有一个小修正。您需要在事件结束时使用 .jstree() 初始化 jsTree 实例并使用文档级别
调用
请更改代码:
var a = $(document).on('dnd_stop.vakata', function(e, data){
alert('move success');
}).jstree();
这很好用!!
完整的 jsfiddle:jsfiddle。net/thanseeh/o3buztex/14
$('#A').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 1","id":"n1"}, {"text":"Root 2","id":"n2"}]
},
plugins:['dnd'],
});
$('#B').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 3","id":"n3"}, {"text":"Root 4","id":"n4"}]
},
plugins:['dnd'],
});
var a = $(document).on('dnd_stop.vakata', function(e, data){
alert('move success');
}).jstree();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css" rel="stylesheet"/>
<div id="A"></div>
<div id="B"></div>
假设我们有2个jstree实例。这里 n1, n2
来自第一棵树的节点和来自第二棵树的 n3, n4
节点。我想 move/drag n4 内的 n2 节点。
但似乎 move_node
方法在不同树实例上移动节点时不会触发。
$('#A').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 1","id":"n1"}, {"text":"Root 2","id":"n2"}]
},
plugins:['dnd'],
});
$('#B').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 3","id":"n3"}, {"text":"Root 4","id":"n4"}]
},
plugins:['dnd'],
});
//setTimeout(function () {
var a = $('#A').on('move_node.jstree', function(e, data) {
console.log('move success');
});
var b = $('#B').on('move_node.jstree', function(e, data) {
console.log('move success');
});
//}, 500);
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script>
<div id="A"></div>
<div id="B"></div>
是否可以在不同的 jstree 实例中拖放节点?
这是fiddle
有一个小修正。您需要在事件结束时使用 .jstree() 初始化 jsTree 实例并使用文档级别
调用请更改代码:
var a = $(document).on('dnd_stop.vakata', function(e, data){
alert('move success');
}).jstree();
这很好用!!
完整的 jsfiddle:jsfiddle。net/thanseeh/o3buztex/14
$('#A').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 1","id":"n1"}, {"text":"Root 2","id":"n2"}]
},
plugins:['dnd'],
});
$('#B').jstree({
"core" : {
"check_callback" : true,
"data" : [{"text":"Root 3","id":"n3"}, {"text":"Root 4","id":"n4"}]
},
plugins:['dnd'],
});
var a = $(document).on('dnd_stop.vakata', function(e, data){
alert('move success');
}).jstree();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css" rel="stylesheet"/>
<div id="A"></div>
<div id="B"></div>