Drag and Drop
This example demonstrates an advanced scenario with ajax enhanced draggables, droppables.
Source
<h:form prependId="false">
<p:growl id="growl" showDetail="true"/>
<h:panelGrid columns="2" columnClasses="lineup,squad">
<p:panel header="Squad">
<p:dataGrid id="availablePlayers" value="#{barcelona.players}" var="player" columns="4">
<p:column>
<p:graphicImage id="player" value="/images/barca/#{player.photo}" styleClass="playerImage"/>
<p:draggable for="player" revert="true" scope="#{player.position}" stack=".playerImage"/>
</p:column>
</p:dataGrid>
</p:panel>
<h:panelGroup>
<h:panelGrid columns="3" style="margin-left:40px;">
<p:outputPanel id="LF" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="forward" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="CF" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="forward" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="RF" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="forward" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
</h:panelGrid>
<h:panelGrid columns="3" style="margin-left:40px;">
<p:outputPanel id="LCM" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="midfield" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="DM" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="midfield" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="RCM" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="midfield" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
</h:panelGrid>
<h:panelGrid columns="4">
<p:outputPanel id="LB" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="CB1" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="CB2" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
<p:outputPanel id="RB" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
</h:panelGrid>
<h:panelGrid columns="1" style="margin-left:120px;">
<p:outputPanel id="GK" styleClass="slot">
<p:droppable tolerance="fit" activeStyleClass="slotActive" scope="goalkeeper" onDrop="handleDrop" datasource="availablePlayers">
<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />
</p:droppable>
</p:outputPanel>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
<p:panel header="Squad">
<p:dataList value="#{barcelona.selectedPlayers}" var="player" id="selectedPlayers">
#{player.number} - #{player.name}
</p:dataList>
</p:panel>
</h:form>
package org.primefaces.examples.view;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import org.primefaces.event.DragDropEvent;
import org.primefaces.examples.domain.Player;
public class Barcelona implements Serializable {
private List<Player> players;
private List<Player> selectedPlayers;
public Barcelona() {
players = new ArrayList<Player>();
selectedPlayers = new ArrayList<Player>();
players.add(new Player("Messi", 10, "messi.jpg", "forward"));
players.add(new Player("Villa", 7, "villa.jpg", "forward"));
players.add(new Player("Pedro", 17, "pedro.jpg", "forward"));
players.add(new Player("Bojan", 9, "bojan.jpg", "forward"));
players.add(new Player("Xavi", 6, "xavi.jpg", "midfield"));
players.add(new Player("Iniesta", 8, "iniesta.jpg", "midfield"));
players.add(new Player("Mascherano", 16, "mascherano.jpg", "defence"));
players.add(new Player("Puyol", 5, "puyol.jpg", "defence"));
players.add(new Player("Alves", 2, "alves.jpg", "defence"));
players.add(new Player("Valdes", 1, "valdes.jpg", "goalkeeper"));
players.add(new Player("Abidal", 22, "abidal.jpg", "defence"));
players.add(new Player("Adriano", 16, "adriano.jpg", "defence"));
players.add(new Player("Pinto", 13, "pinto.jpg", "goalkeeper"));
players.add(new Player("Pique", 3, "pique.jpg", "defence"));
players.add(new Player("Keita", 7, "keita.jpg", "midfield"));
players.add(new Player("Maxwell", 5, "maxwell.jpg", "defence"));
}
public List<Player> getPlayers() {
return players;
}
public List<Player> getSelectedPlayers() {
return selectedPlayers;
}
public void onDrop(DragDropEvent event) {
Player player = (Player) event.getData();
selectedPlayers.add(player);
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(player.getName() + " added", "Position:" + event.getDropId()));
}
}
