Arrastrar y soltar en tablas de datos anidadas

Estoy usando primeface 4.0.

El escaparate de Primeface solo muestra cómo arrastrar un elemento draggable a 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 contener un panel desplegable en el que se pueden draggable y draggable múltiples elementos draggable .
  2. Un objeto de frijol trasero que “mantiene los datos” de esta tabla de datos, que asumo que si la tabla de datos es 2 * 2, habrá 4 Lista en el frijol trasero, cada uno almacena una lista de objetos draggable del área droppable correspondiente.

Algo así como una versión más simple de p:schedule que permite arrastrar y soltar eventos entre las celdas.

Mis esfuerzos:

  1. Me las arreglé para hacer que algunas de las funciones funcionaran, como arrastrar a un droppable

  2. Pero no puedo hacer que se elimine el arrastre draggable porque no hay drag evento ajax en p:draggable para pasar los datos al bean back, como drop evento en p:droppable . (Hay una forma de usar el start evento arrastrable JQuery y stop para pasar la columna y la fila num. para volver al bean, pero no estoy seguro de que sea una buena manera de hacerlo)

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


Actualización: creo que el problema principal es que p:droppable solo vincula una ddEvent.getData() datos, por lo que ddEvent.getData() siempre obtendrá el ‘objeto’ de la fuente de datos enlazada, mi problema es que tengo varias áreas droppable y cada una necesita vincular varias fonts de datos .


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

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

 

frijol trasero

  public List 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 mapa como contenedor que contiene los turnos semanales de cada empleado.

Siempre puede arrastrar Arrastrar y soltar de un contenedor a otro contenedor.

Diga una fila arrastrable en p: table o p: panel dentro de ap: panelgrid (lado A) a Droppable p: outPanel (lado B) u mantendrá dos Lista, una para el lado A y la otra para el lado B.

Y haga que el lado A sea descargable y el lado B que se pueda arrastrar para tener un comportamiento de arrastrar y soltar cíclico (ambos actuarán como fuente de datos para cada etiqueta dropable) y usar ddEvent.getData para agregar y eliminar de la lista de objetos en El lado del controlador.

Para el requisito anterior, puede implementar un panelGrid y tener varias relaciones como esta.

O

Use dragabblerows = “true” y draggableColumns = “true” para jugar con las filas y columnas en el parámetro P: table. :pag