<script type="text/javascript"> function handleDrop(event, ui) { var droppedCar = ui.draggable; droppedCar.fadeOut('fast'); } </script> <a:form id="carForm"> <a:fieldset id="availableCarsField" legend="Available Cars"> <a:dataTable id="availableCars" var="car" value="#{dndCarsView.cars}"> <a:column style="width:20px"> <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" /> <a:draggable for="dragIcon" revert="true" helper="clone"/> </a:column> <a:column headerText="Id"> <h:outputText value="#{car.id}" /> </a:column> <a:column headerText="Year"> <h:outputText value="#{car.year}" /> </a:column> <a:column headerText="Brand"> <h:outputText value="#{car.brand}" /> </a:column> <a:column headerText="Color"> <h:outputText value="#{car.color}" /> </a:column> </a:dataTable> </a:fieldset> <a:fieldset id="selectedCars" legend="Selected Cars" style="margin-top:20px"> <a:outputPanel id="dropArea"> <h:outputText value="!!!Drop here!!!" rendered="#{empty dndCarsView.droppedCars}" style="font-size:24px;" /> <a:dataTable id="selectedCarsTable" var="car" value="#{dndCarsView.droppedCars}" rendered="#{not empty dndCarsView.droppedCars}"> <a:column headerText="Id"> <h:outputText value="#{car.id}" /> </a:column> <a:column headerText="Year"> <h:outputText value="#{car.year}" /> </a:column> <a:column headerText="Brand"> <h:outputText value="#{car.brand}" /> </a:column> <a:column headerText="Color"> <h:outputText value="#{car.color}" /> </a:column> <a:column style="width:32px"> <a:commandButton update=":carForm:display" oncomplete="PF('carDialog').show()" icon="ui-icon-search"> <f:setPropertyActionListener value="#{car}" target="#{dndCarsView.selectedCar}" /> </a:commandButton> </a:column> </a:dataTable> </a:outputPanel> </a:fieldset> <a:droppable for="selectedCars" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableCars" onDrop="handleDrop"> <a:ajax listener="#{dndCarsView.onCarDrop}" update="dropArea availableCars" /> </a:droppable> <a:dialog header="Car Detail" widgetVar="carDialog" resizable="false" draggable="false" showEffect="fade" hideEffect="fade" modal="true"> <a:outputPanel id="display"> <h:panelGrid columns="2" cellpadding="4" rendered="#{not empty dndCarsView.selectedCar}"> <f:facet name="header"> <a: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> </a:outputPanel> </a:dialog> </a:form>
package com.jarch.showcase.view.dnd; import java.io.Serializable; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.ViewScoped; import org.primefaces.event.DragDropEvent; import org.primefaces.showcase.domain.Car; import org.primefaces.showcase.service.CarService; @ManagedBean(name = "dndCarsView") @ViewScoped public class DNDCarsView implements Serializable { @ManagedProperty("#{carService}") 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<Car>(); } public void onCarDrop(DragDropEvent ddEvent) { Car 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; } }