Nodes can be reordered within the same tree or transferred between multiple trees using drag and drop.
<div class="card">
<h:form id="form">
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>
<h:panelGrid columns="3">
<p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
selection="#{treeDNDView.selectedNode1}" style="width:16rem"
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:outputText styleClass="pi pi-sort-alt mx-5 text-secondary" style="transform: rotate(90deg); font-size: 3rem" />
<p:tree id="tree2" value="#{treeDNDView.root2}" var="node" selectionMode="single"
selection="#{treeDNDView.selectedNode2}" style="width:16rem"
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>
</div>
@Named("treeDNDView")
@ViewScoped
public class DragDropView implements Serializable {
private TreeNode root1;
private TreeNode root2;
private TreeNode selectedNode1;
private TreeNode selectedNode2;
@PostConstruct
public void init() {
root1 = new DefaultTreeNode("Root", null);
TreeNode node0 = new DefaultTreeNode("Node 0", root1);
TreeNode node1 = new DefaultTreeNode("Node 1", root1);
TreeNode node2 = new DefaultTreeNode("Node 2", root1);
TreeNode node00 = new DefaultTreeNode("Node 0.0", node0);
TreeNode node01 = new DefaultTreeNode("Node 0.1", node0);
TreeNode node10 = new DefaultTreeNode("Node 1.0", node1);
TreeNode node11 = new DefaultTreeNode("Node 1.1", node1);
TreeNode node000 = new DefaultTreeNode("Node 0.0.0", node00);
TreeNode node001 = new DefaultTreeNode("Node 0.0.1", node00);
TreeNode node010 = new DefaultTreeNode("Node 0.1.0", node01);
TreeNode node100 = new DefaultTreeNode("Node 1.0.0", node10);
root2 = new DefaultTreeNode("Root2", null);
TreeNode item0 = new DefaultTreeNode("Item 0", root2);
TreeNode item1 = new DefaultTreeNode("Item 1", root2);
TreeNode item2 = new DefaultTreeNode("Item 2", root2);
TreeNode item00 = new DefaultTreeNode("Item 0.0", item0);
}
public TreeNode getRoot1() {
return root1;
}
public TreeNode getRoot2() {
return root2;
}
public TreeNode getSelectedNode1() {
return selectedNode1;
}
public void setSelectedNode1(TreeNode selectedNode1) {
this.selectedNode1 = selectedNode1;
}
public TreeNode getSelectedNode2() {
return selectedNode2;
}
public void setSelectedNode2(TreeNode selectedNode2) {
this.selectedNode2 = selectedNode2;
}
public void onDragDrop(TreeDragDropEvent event) {
TreeNode dragNode = event.getDragNode();
TreeNode dropNode = event.getDropNode();
int dropIndex = event.getDropIndex();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Dragged " + dragNode.getData(), "Dropped on " + dropNode.getData() + " at " + dropIndex);
FacesContext.getCurrentInstance().addMessage(null, message);
}
}