Tree - DragDrop

Nodes can be reordered within the same tree or transferred between multiple trees using drag and drop.

Transfer
<style type="text/css">
    .ui-tree {
        width: 300px
    }
    
    #form\:tree1 {
        float: right;
    }
    
    #form\:tree2 {
        float: left;
    }
</style>       


<h:form id="form">
    <p:growl id="msgs" showDetail="true" />

    <h:panelGrid columns="3">
        <p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single" selection="#{treeDNDView.selectedNode1}" 
                draggable="true" droppable="true" dragdropScope="demo">
            <p:ajax event="dragdrop" listener="#{treeDNDView.onDragDrop}" update=":form:msgs" />
            <p:treeNode>
                <h:outputText value="#{node}" />
            </p:treeNode>
        </p:tree>

        <p:graphicImage alt="Transfer" name="demo/images/transfer.png" />

        <p:tree id="tree2" value="#{treeDNDView.root2}" var="node" selectionMode="single" selection="#{treeDNDView.selectedNode2}" 
                draggable="true" droppable="true" dragdropScope="demo">
            <p:ajax event="dragdrop" listener="#{treeDNDView.onDragDrop}" update=":form:msgs" />
            <p:treeNode>
                <h:outputText value="#{node}" />
            </p:treeNode>
        </p:tree>
    </h:panelGrid>
</h:form>