How to use PrimeFaces p: droppable inside datatable?

Question

There is a need to classify items for business. The best idea is to drag items from one list to a list of categories. The number of categories can vary, so p: dataTable is used. An Ajax request is sent, but the onDrop method is not called from within the dataTable. When deleting data and columns and having output panels, onDrop is statically called?

How to drag items into dynamically changing categories?

        <h:form prependId="false">
            <h:panelGrid columns="2">
                <p:dataTable id="itemstable" value="#{categoryBean.items}" var="item">
                    <p:column>
                        <p:outputPanel id="itemrow">
                            <h:outputText value="#{item}"></h:outputText>
                        </p:outputPanel>
                        <p:draggable for="itemrow"></p:draggable>
                    </p:column>
                </p:dataTable>

                <p:dataTable value="#{categoryBean.categories}" var="cat">
                    <p:column>
                        <p:outputPanel id="cats1">
                            <h:outputText value="category1"></h:outputText>
                        </p:outputPanel>
                        <p:droppable for="cats1"
                                     dropListener="#{categoryBean.onDrop}"
                                     tolerance="pointer"
                                     activeStyleClass="slotActive"
                                     datasource="itemstable">
                        </p:droppable>
                    </p:column>
                </p:dataTable>
            </h:panelGrid>
        </h:form>

Answer 1

PrimeFaces , <p:droppable> , dropListener . Facelets <ui:repeat>, dropListener , <p:dataTable>.

PrimeFaces .
PrimeFaces ShowCase