Tree To Tree

The following demonstrates how easy it is to allow dragging and dropping between 2 trees. When a drop is detected on either tree the source node/element can be detected and added to the target tree using EasyTree's global methods.

        <div id="demo_menu1" style="float:left; width:230px;">
            <ul>
                <li>First Node</li>
                <li><a href="http://www.easyjstree.com" target="_blank">Home</a></li>
                <li class="isFolder isExpanded" title="Bookmarks">
                    Folder 1
                    <ul>
                        <li><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
                        <li><a href="http://www.yahoo.com" target="_blank">Go to Yahoo.com</a></li>
                    </ul>
                </li>
                <li>
                    Node 1
                    <ul>
                        <li>Sub Node 1</li>
                        <li>
                            Sub Node 2
                            <ul>
                                <li>Sub Sub Node 1</li>
                                <li>Sub Sub Node 2</li>
                                <li>Sub Sub Node 3</li>
                                <li>Sub Sub Node 4</li>
                            </ul>
                        </li>
                        <li>Sub Node 3</li>
                    </ul>
                </li>
                <li>Node 2</li>
            </ul>
        </div>
        <div id="demo_menu2" style="float:right; width:230px;">
            <ul>
                <li><a href="http://www.easyjstree.com" target="_blank">Home</a></li>
                <li class="isFolder" title="Bookmarks">
                    Folder 1
                    <ul>
                        <li><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
                        <li><a href="http://www.yahoo.com" target="_blank">Go to Yahoo.com</a></li>
                    </ul>
                </li>
                <li class="isFolder">Folder 2</li>
                <li class="isFolder">Folder 3</li>
                <li class="isFolder">Folder 4</li>
            </ul>
        </div>
        <script>
            function dropped1(event, nodes, isSourceNode, source, isTargetNode, target) {
                if (isSourceNode && !isTargetNode) { // left to right drop
                    easyTree2.addNode(source, target.id);
                    easyTree1.removeNode(source.id);
                    easyTree2.rebuildTree(); // rebuild 'other' tree
                }
            }
            function dropped2(event, nodes, isSourceNode, source, isTargetNode, target) {
                if (isSourceNode && !isTargetNode) { // Right to left drop
                    easyTree2.removeNode(source.id);
                    easyTree1.addNode(source, target.id);
                    easyTree1.rebuildTree(); // rebuild 'other' tree
                }
            }
            var easyTree1 = $('#demo_menu1').easytree({
                enableDnd: true,
                dropped: dropped1
            });
            var easyTree2 = $('#demo_menu2').easytree({
                enableDnd: true,
                dropped: dropped2
            });
        </script>