Drag and Drop of cards in DataTable columns

[amela]

I am having table of cards in columns, and I want to drag and drop cards between columns. Something like Dashboard in Primefaces but with columns and subcolumns. Here is my code:

Code: Select all

 <p:fieldset id="DataTableCardsf" legend="Selected Cards">
                            <p:outputPanel id="dropArea">
                                <p:dataTable id="DataTableCards" value="#{mBBoardView.mapOfColumns.get(projectPanel)}" var="column">
                                    <!--<p:column headerText="Cards">-->
                                        <p:column id="columnField" headerText="#{column.name}" style="width: #{75/mBBoardView.columns.size()}%">
                                        <!--load cards -->
                                            <p:dataGrid id="cardsInColumn" var="card" value="#{mBBoardView.map[column.getIdcolumn()]}" columns="1">
                                                <p:panel id="pnl" header="#{card.idcard}" style="text-align:center">
                                                    <h:panelGrid columns="1" style="text-align: center;">
                                                        #{card.details}
                                                        #{card.code}
                                                    </h:panelGrid>
                                                </p:panel>
                                                <p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
                                            </p:dataGrid>
                                        </p:column>
                                    <!--</p:column>-->
                                </p:dataTable>
                            </p:outputPanel>
                             </p:fieldset>
                            <p:droppable for="DataTableCardsf" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="DataTableCards" onDrop="handleDrop">
                                <p:ajax listener="#{mBBoardView.onCardDrop}" update="dropArea DataTableCards" />
                            </p:droppable>
                            

I am trying to follow https://www.primefaces.org/showcase/ui/ ... ble.xhtml example, where they have two tables, one for drag other for drop, while I just have one for both. Can somebody tell me is this the right way to do it, or maybe suggest an alternative for this in Primefaces? Thanks.