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.