JsTree перетащить между двумя деревьями и связать?

Я хочу использовать JsTree (точнее, тот, который я сейчас пытаюсь использовать), чтобы иметь 2 дерева. Вы должны иметь возможность перетаскивать узлы, но НЕ внутри дерева, а только между деревьями. И узел не должен перемещаться или копироваться, он должен создавать отношения, т.е. я предполагаю, что это будет достигнуто с помощью обратного вызова, потому что дереву не нужно регистрировать само отношение, все, что мне нужно, это получить информацию, например, Дочерний узел A был сброшен на дочерний узел 1.

Вот то, что у меня есть пока только из образцов на сайте JsTree, в основном просто два дерева dnd, что недостаточно хорошо, потому что вы не можете в настоящее время перетаскивать между деревьями, а также вы можете перетаскивать внутри, что опять же вам не должно быть позволено to в моем сценарии (html - это просто то, что я поместил на странице примера Bootstrap):

<div class="row">
        <div class="col-md-4">
            <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui. </p>

            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>


            <div id="jstree">
                <!-- in this example the tree is populated from inline HTML -->
                <ul>
                    <li>Root node start
                        <ul>
                            <li id="child_node_1">Child node 1</li>
                            <li>Child node 2</li>
                        </ul>
                    </li>
                    <li>Root node 2</li>
                </ul>
            </div>

        </div>
        <div class="col-md-4">
            <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui. </p>

            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>

            <div id="jstree2">
                <!-- in this example the tree is populated from inline HTML -->
                <ul>
                    <li>Root node start
                        <ul>
                            <li id="child_node_1_2">Child node A</li>
                            <li>Child node B</li>
                        </ul>
                    </li>
                    <li>Root node 2</li>
                </ul>
            </div>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>

            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
                porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
                fermentum massa justo sit amet risus.</p>

            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
    </div>

И jquery (опять же в основном из образцов):

jQuery(document).ready(function () {

    $('#jstree').jstree({
        "core":{
            "animation":0,
            "check_callback":true,
            "themes":{ "stripes":true }
        },
        rules:{
            droppable:[ "tree-drop" ],
            multiple:true,
            deletable:"all",
            draggable:"all"
        },
        "types":{
            "#":{
                "max_children":1,
                "max_depth":4,
                "valid_children":["root"]
            },
            "root":{
                "icon":"/static/3.0.0-beta5/assets/images/tree_icon.png",
                "valid_children":["default"]
            },
            "default":{
                "valid_children":["default", "file"]
            },
            "file":{
                "icon":"glyphicon glyphicon-file",
                "valid_children":[]
            }
        },
        "plugins":[
            "contextmenu", "dnd", "search",
            "state", "types", "wholerow"
        ]
    });

    $('#jstree2').jstree({
            "core":{
                "animation":0,
                "check_callback":true,
                "themes":{ "stripes":true }
            },
            rules:{
                droppable:[ "tree-drop" ],
                multiple:true,
                deletable:"all",
                draggable:"all"
            },
            "types":{
                "#":{
                    "max_children":1,
                    "max_depth":4,
                    "valid_children":["root"]
                },
                "root":{
                    "icon":"/static/3.0.0-beta5/assets/images/tree_icon.png",
                    "valid_children":["default"]
                },
                "default":{
                    "valid_children":["default", "file"]
                },
                "file":{
                    "icon":"glyphicon glyphicon-file",
                    "valid_children":[]
                }
            },
            "plugins":[
                "contextmenu", "dnd", "search",
                "state", "types", "wholerow"
            ]
        });

    // bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
        console.log(data.selected);
    });

});