JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
First tree
<div id="tree"></div>

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

CSS

#tree, #tree2 {
   margin-bottom:80px;
}

#tree2 {
    border: #ddd solid 2px;
    height:200px;
    width:200px;
}

.highlighted {
    color: green;
    font-weight: bold;
}

JavaScript

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" : "rootTree2", "parent" : "#", "text" : "Root", "state":{"opened":true} }
]

$('#tree')
    .jstree({
    "core" : {
        "data" : data,
        "themes": {
            "url": true,
            "icons": true,
            "dots": true
        },
        "check_callback": true
    },
    "plugins": [ "dnd" ]
 });  


$('#tree2')
    .jstree({
    "core" : {
        "data" : data2,
        "themes": {
            "url": true,
            "icons": true
        },
   			"check_callback": true     
    },
    "plugins": [ "dnd" ]
 });  

var overSecondTree = false;

$(document).on('dnd_move.vakata', function(e, data) {
    // change icon to `allow drop` if from first tree and over second tree with a single root node
   if ( $('#tree2 li').length === 1 && overSecondTree ) {
        // change icon to `allow drop`
			  $('#vakata-dnd').find('i').removeClass('jstree-er').addClass('jstree-ok');
    } else {
				// change icon to `restrict drop`
        $('#vakata-dnd').find('i').removeClass('jstree-ok').addClass('jstree-er');
    }
});

$(document).on('dnd_stop.vakata', function(e, data) {
    // allow drop to tree2 only if single root node
    if ( $('#tree2 li').length === 1 && overSecondTree) {
        $("#tree2").jstree().create_node('#rootTree2', data.element.text);
    }    
})

$("#tree2").mouseenter(function(event){
	 overSecondTree = true;
   if ( $('#tree2 li').length === 1 ) {
      $('#rootTree2').addClass('highlighted');      
   }
})

$("#tree2").mouseleave(function(event){
   overSecondTree = false;
   $('#rootTree2').removeClass('highlighted');
})