jquery - rendered - Arrastrar y soltar en tablas de datos anidados

rendered datatable primefaces

Question

Estoy usando Primeface 4.0.

El escaparate de primface solo muestra cómo arrastrar un draggable hacia un droppable . Pero nunca se menciona cómo arrastrar un draggable fuera de ese droppable .

Quiero hacer una tabla de datos que:

1. Cada td contiene un panel desplegable que puede draggable hacia adentro y hacia afuera .
2. Un objeto back bean que "guarda datos" de esta tabla de datos, que supongo que si dataTable es 2 * 2, habrá 4 List en el back bean, cada uno almacena una lista de objetos draggable del área correspondiente que se puede droppable .

Como una versión más simple de p:schedule que permite arrastrar y soltar eventos entre celdas.

Mis esfuerzos:

1. Logré hacer algunas de las funciones trabajadas, como arrastrar en un droppable

2. Pero no puedo eliminar el arrastrable draggable porque no hay drag evento ajax en p:draggable para pasar datos a back bean, como lo hice drop event en p:droppable . (Hay una manera de utilizar JQuery start evento start y stop para pasar el col y row num a back bean, pero no estoy seguro de que sea una buena forma de hacerlo)

3. No creo que mi implementación sea la correcta, ya que hay algunos bichos extraños , como que a veces el objeto arrastrado que obtengo de ddEvent.getData() no es el correcto. (Supongo que tiene algo que ver con el único dataSource de p:droppable droppable . Issue1469 )

Actualización: Creo que el principal problema es que p:droppable solo vincula un origen de datos, por lo que ddEvent.getData() siempre obtendrá el ''objeto'' de la fuente de datos encuadernada, mi problema es que tengo múltiples áreas desplegables y cada una necesita vincular múltiples fuentes de datos .

. Lástima que no pude publicar una captura de pantalla ...

Aquí está mi código: xthml: Cambios ...

<p:columns value="#{scheduleControler.weekdays}" var="date"
    styleClass="schedule_date" columnIndexVar="colIndex">
    <f:facet name="header">
        <h:outputText value="#{scheduleControler.weekdays[colIndex]}">
            <f:convertDateTime pattern="EEE, dd MMM" />
        </h:outputText>
    </f:facet>
    <!-- Droppable:   -->
    <p:outputPanel id="dropArea">
        <p:outputPanel id="dropped">
            <p:dataTable var="shift2"
                value="#{scheduleControler.getDailyShift(employee.id,date)}"
                rendered="#{not empty scheduleControler.getDailyShift(employee.id,date)}">
                <p:column>
                    <p:outputPanel id="shiftBlock2" styleClass="shift_block"
                        style="background-color: /##{shift2.color}">
                        <h:outputText value="#{shift2.name}" />
                    </p:outputPanel>

                    <p:draggable for="shiftBlock2" opacity="0.5" revert="true">
                    </p:draggable>
                </p:column>

            </p:dataTable>
        </p:outputPanel>
    </p:outputPanel>
    <!-- Config Droppable: update entire table, pass additional param by attributes -->
    <p:droppable for="dropArea" tolerance="intersect"
        activeStyleClass="ui-state-highlight" datasource=":shiftTable">
        <f:attribute name="weekday" value="#{date}" />
        <f:attribute name="eid" value="#{employee.id}" />
        <p:ajax event="drop" listener="#{scheduleControler.onShiftDrop}"
            update=" :centerForm:scheduleTbale" />

    </p:droppable>
</p:columns>

Back Bean:

 public List<ShiftDto> getDailyShift(String eid, Date date) {
            return this.tmpSchedule.getShifts(eid).get(date);
        }
    public void onShiftDrop(DragDropEvent ddEvent) {
            ShiftDto shift = ((ShiftDto) ddEvent.getData());
            Date weekday = (Date) ddEvent.getComponent().getAttributes()
                    .get("weekday");
            String eid = (String) ddEvent.getComponent().getAttributes().get("eid");
            System.out.println("onShiftDrop: " + shift);
            System.out.println("dropedDate: " + weekday);
            System.out.println("dropedEmployee: " + eid);

            this.tmpSchedule.addShift(eid, weekday, shift);

        }

tmpSchedule es solo un contenedor de tipo mapa que contiene los turnos semanales de cada empleado.