Tree - DragDrop
Nodes can be reordered within the same tree or transferred between multiple trees using drag and drop.
Documentation
<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" skipDetailIfEqualsSummary="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>
@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);
}
}
