Search code examples
javascriptjquerytreejstree

Moving node from one jstree to another jstree not working


Suppose that we have 2 jstree instances. Here n1, n2 node from first tree and n3, n4 node from the second tree. I would like to move/drag n2 node within n4. But it seems the move_node method not firing while moving node on different tree instance.

$('#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>

Is it possible to drag and drop node within different jstree instances?

Here is the fiddle


Solution

  • There is a small correction. You need to initialize jsTree instance at end of the event using .jstree() and call using document level

    please make the changes in the code:

    var a = $(document).on('dnd_stop.vakata', function(e, data){
      alert('move success');
    }).jstree();
    

    This works fine!!

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