datagrid.xhtml

 <!-- On met tout ca dans un panel avec en background une image de terrain de foot-->
    <p:panel header="Field"  styleClass="soccer_field">  
        <!-- On créé la dataGrid pour afficher la grille-->
        <p:dataGrid id="trgField" 
                    value="#{myController.lstTarget}" 
                    var="t" columns="5" 
                    style="padding-top: 25px;margin-left: 20px;">     
            <p:column>  
                <!-- Chaque case de la grille est un panel sans header d'une taille de 50*63-->
                <p:panel id="trg" 
                         style="width:50px;height:63px;opacity:0.5;">
                    <!-- Si un FomationItem est associé à la case, on l'affiche
                         dans un panel sans header de 24*47 -->
                    <p:panel id="item" 
                             rendered="#{!empty t.formationItem.numItem}" 
                             style="width:24px;height:47px;">
                        <h:outputText value="#{t.formationItem.numItem}"  
                                      style="text-align:center;font-weight: bolder;"/> 
                    </p:panel>
                    <!-- On rend le panel du FormationItem draggable -->
                    <p:draggable for="item" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel" /> 
                </p:panel>
                <!-- On rend chaque case de la grille droppable en lui associant comme dataSource la DataGrid -->
                <p:droppable for="trg"
                             tolerance="touch"
                             activeStyleClass="slotActive" 
                             datasource="trgField"
                             onDrop="handleDrop">
                    <!-- On ajoute un listener sur l'event onDrop -->
                    <p:ajax listener="#{myController.onDrop}" 
                            update="@form"/>
                </p:droppable>
            </p:column>  
        </p:dataGrid>  
    </p:panel>