Close

Primefaces - Drag And Drop Example

[Last Updated: Jul 27, 2018]

This example shows how to use Primefaces <p:draggable/> and <p:droppable> to select items from one dataList component to another one.

Example

Managed bean

@ManagedBean
@ViewScoped
public class ItemsBean {
  private List<String> items;
  private List<String> selectedItems = new ArrayList<>();

  @PostConstruct
  public void postConstruct() {
      items = new ArrayList<>(Arrays.asList(
              "Shane", "Amber", "Kiley"));
  }

  public List<String> getItems() {
      return items;
  }

  public void onItemDropped(DragDropEvent event) {
      String item = (String) event.getData();
      selectedItems.add(item);
      items.remove(item);
  }

  public List<String> getSelectedItems() {
      return selectedItems;
  }
}

JSF Page

src/main/webapp/index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
<style>
  body{margin:30px}
  .ui-datalist{width:150px; height:150px;}
  .ui-datalist-content { border: none;}
</style>
</h:head>
<h:body>
    <h2>PrimeFaces Drag and Drop Example</h2>
    <h:form>
        <table class="container">
            <tr>
                <td>
                    <p:fieldset legend="Items">
                    <p:dataList id="idItemList"
                                value="#{itemsBean.items}"
                                var="item"
                                type="ordered">
                        <h:outputText id="idItem"
                                      value="#{item}"/>
                        <p:draggable for="idItem"
                                     revert="true">
                        </p:draggable>
                    </p:dataList>
                    </p:fieldset>
                </td>
                <td>
                    <p:fieldset id="idFieldSelectedItemList"
                                legend="Selected items">
                    <p:dataList id="idSelectedItemList"
                                value="#{itemsBean.selectedItems}"
                                var="selectedItem"
                                type="ordered">
                        <h:outputText value="#{selectedItem}"/>
                    </p:dataList>
                    <p:droppable for="idFieldSelectedItemList"
                                 datasource="idItemList">
                        <p:ajax listener="#{itemsBean.onItemDropped}"
                                update="idItemList idSelectedItemList"/>
                    </p:droppable>
                    </p:fieldset>
                </td>
            </tr>
        </table>
    </h:form>
</h:body>
</html>

Running

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

  • primefaces 6.2: PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more. [Description from primefaces-6.2.pom]
  • jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • JDK 1.8
  • Maven 3.5.4
Basic Dnd example Select All Download
  • primefaces-dnd-item-selection
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also