DragDrop components have special integration with data components. Drag the cars using the headers to the drop area.
Documentation<script type="text/javascript"> function handleDrop(event, ui) { var droppedCar = ui.draggable; droppedCar.fadeOut('fast'); } </script> <h:form id="carForm"> <p:fieldset id="availableCarsField" legend="AvailableCars"> <p:dataGrid id="availableCars" var="car" value="#{dndCarsView.cars}" columns="3"> <p:panel id="pnl" header="#{car.id}" style="text-align:center"> <h:panelGrid columns="1" style="width:100%"> <p:graphicImage name="/demo/images/car/#{car.brand}.gif" /> </h:panelGrid> </p:panel> <p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/> </p:dataGrid> </p:fieldset> <p:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px"> <p:outputPanel id="dropArea"> <h:outputText value="!!!Drop here!!!" rendered="#{empty dndCarsView.droppedCars}" style="font-size:24px;" /> <p:dataTable id="selectedCarsTable" var="car" value="#{dndCarsView.droppedCars}" rendered="#{not empty dndCarsView.droppedCars}"> <p:column headerText="Id"> <h:outputText value="#{car.id}" /> </p:column> <p:column headerText="Year"> <h:outputText value="#{car.year}" /> </p:column> <p:column headerText="Brand"> <h:outputText value="#{car.brand}" /> </p:column> <p:column headerText="Color"> <h:outputText value="#{car.color}" /> </p:column> <p:column style="width:32px"> <p:commandButton update=":carForm:display" oncomplete="PF('carDialog').show()" icon="pi pi-search"> <f:setPropertyActionListener value="#{car}" target="#{dndCarsView.selectedCar}" /> </p:commandButton> </p:column> </p:dataTable> </p:outputPanel> </p:fieldset> <p:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop"> <p:ajax listener="#{dndCarsView.onCarDrop}" update="dropArea availableCars" /> </p:droppable> <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false" showEffect="fade" hideEffect="fade" modal="true"> <p:outputPanel id="display"> <h:panelGrid columns="2" cellpadding="5" rendered="#{not empty dndCarsView.selectedCar}"> <f:facet name="header"> <p:graphicImage name="/demo/images/car/#{dndCarsView.selectedCar.brand}.gif"/> </f:facet> <h:outputText value="Id" /> <h:outputText value="#{dndCarsView.selectedCar.id}" style="font-weight:bold"/> <h:outputText value="Year:" /> <h:outputText value="#{dndCarsView.selectedCar.year}" style="font-weight:bold"/> <h:outputText value="Brand" /> <h:outputText value="#{dndCarsView.selectedCar.brand}" style="font-weight:bold"/> <h:outputText value="Color:" /> <h:outputText value="#{dndCarsView.selectedCar.color}" style="font-weight:bold"/> </h:panelGrid> </p:outputPanel> </p:dialog> </h:form>
@Named("dndCarsView") @ViewScoped public class DNDCarsView implements Serializable { @Inject private CarService service; private List<Car> cars; private List<Car> droppedCars; private Car selectedCar; @PostConstruct public void init() { cars = service.createCars(9); droppedCars = new ArrayList<>(); } public void onCarDrop(DragDropEvent<Car> ddEvent) { Car car = ddEvent.getData(); droppedCars.add(car); cars.remove(car); } public void setService(CarService service) { this.service = service; } public List<Car> getCars() { return cars; } public List<Car> getDroppedCars() { return droppedCars; } public Car getSelectedCar() { return selectedCar; } public void setSelectedCar(Car selectedCar) { this.selectedCar = selectedCar; } }
@Named @ApplicationScoped public class CarService { private final static String[] colors; private final static String[] brands; static { colors = new String[10]; colors[0] = "Black"; colors[1] = "White"; colors[2] = "Green"; colors[3] = "Red"; colors[4] = "Blue"; colors[5] = "Orange"; colors[6] = "Silver"; colors[7] = "Yellow"; colors[8] = "Brown"; colors[9] = "Maroon"; brands = new String[10]; brands[0] = "BMW"; brands[1] = "Mercedes"; brands[2] = "Volvo"; brands[3] = "Audi"; brands[4] = "Renault"; brands[5] = "Fiat"; brands[6] = "Volkswagen"; brands[7] = "Honda"; brands[8] = "Jaguar"; brands[9] = "Ford"; } public List<Car> createCars(int size) { List<Car> list = new ArrayList<Car>(); for(int i = 0 ; i < size ; i++) { list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState())); } return list; } private String getRandomId() { return UUID.randomUUID().toString().substring(0, 8); } private int getRandomYear() { return (int) (Math.random() * 50 + 1960); } private String getRandomColor() { return colors[(int) (Math.random() * 10)]; } private String getRandomBrand() { return brands[(int) (Math.random() * 10)]; } private int getRandomPrice() { return (int) (Math.random() * 100000); } private boolean getRandomSoldState() { return (Math.random() > 0.5) ? true: false; } public List<String> getColors() { return Arrays.asList(colors); } public List<String> getBrands() { return Arrays.asList(brands); } }
public class Car implements Serializable { public String id; public String brand; public int year; public String color; public int price; public boolean sold; public Car() {} public Car(String id, String brand, int year, String color) { this.id = id; this.brand = brand; this.year = year; this.color = color; } public Car(String id, String brand, int year, String color, int price, boolean sold) { this.id = id; this.brand = brand; this.year = year; this.color = color; this.price = price; this.sold = sold; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getBrand() { return brand; } public void setBrand(String brand) { this.brand = brand; } public int getYear() { return year; } public void setYear(int year) { this.year = year; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } public boolean isSold() { return sold; } public void setSold(boolean sold) { this.sold = sold; } @Override public int hashCode() { int hash = 7; hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0); return hash; } @Override public boolean equals(Object obj) { if (obj == null) { return false; } if (getClass() != obj.getClass()) { return false; } final Car other = (Car) obj; if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) { return false; } return true; } }