jsTree move child to root from one tree to other

Question

I am facing problem in jsTree. I want to move child node to root node and viseversa. Also i can move from first tree child to root of second tree. Please help me .

Please find my below jsfiddle link. http://jsfiddle.net/ermakovnikolay/ubo3tjzk/

First tree
<div id="tree"></div>

Second tree
<div id="tree2"></div>

var data = [
     { "id" : "root", "parent" : "#", "text" : "Root", "state":{"opened":true} },
     { "id" : "cat1", "parent" : "root", "text" : "First Branch", "state":{"opened":true}  },
     { "id" : "cat01", "parent" : "cat1", "text" : "Cat 0.1.0" },
     { "id" : "cat02", "parent" : "cat1", "text" : "Cat 0.1.1" },
     { "id" : "cat03", "parent" : "cat1", "text" : "Cat 0.1.2" }
]

var data2 = [
     { "id" : "cat2", "parent" : "#", "text" : "Second Branch", "state": {"opened":true}},
     { "id" : "cat11", "parent" : "cat2", "text" : "Cat 1.1.0" },
     { "id" : "cat12", "parent" : "cat2", "text" : "Cat 1.1.1"  },
     { "id" : "cat13", "parent" : "cat2", "text" : "Cat 1.1.2" }
]

$.jstree.defaults.core = {};

$('#tree')
    .on('changed.jstree', function (event, data) {
          if( data.action == 'select_node'){ 
              $('#tree').find('li').removeClass('disabled_node');
              currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).addClass('disabled_node');   
                  }
              });

          }
          if( data.action == 'deselect_node'){ 
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).removeClass('disabled_node');   
                  }
              }); 
          }
    })
    .jstree({
    "core" : {
        "data" : data,
        "themes": {
            "url": true,
            "icons": true
        }
    }
 });  


$('#tree2')
    .on('changed.jstree', function (event, data) {
          if( data.action == 'select_node'){ 
              $('#tree').find('li').removeClass('disabled_node');
              currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).addClass('disabled_node');   
                  }
              });

          }
          if( data.action == 'deselect_node'){ 
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).removeClass('disabled_node');   
                  }
              }); 
          }
    })
    .jstree({
    "core" : {
        "data" : data2,
        "themes": {
            "url": true,
            "icons": true
        }
    }
 });  

Answer 1

Check demo - Fiddle

You can restrict drop to the first tree with:

'check_callback': function(operation, node, node_parent, node_position, more) {
    if (operation === "move_node") {
        return false;
    }
}

To delete selected node from the first tree use:

var node = $("#tree").jstree('get_selected');
$("#tree").jstree('delete_node', node);

To delete a node on click place the above snippet into select_node.jstree event.

Check second demo - Fiddle

Answer 2

This is what I achieved so far -

jsfiddle.net/ubo3tjzk/1