Drag and Drop in nested dataTables

问题

I am using primeface 4.0.

The primeface showcase only shows how to drag a draggable in to a droppable. But then how to drag a that draggable out of that droppable is never mentioned.

I wantto make a dataTable that:

Each td cantains a droppable panel which multiple draggable can be both draged in to and out of.
A back bean object that "keeps data" of this dataTable, which I assume if the dataTable is 2*2, there will be 4 List in the back bean, each stores a list of draggable objects of corresponding droppable area.

Kinda like a simpler version ofp:schedule that allows events to be drag and drop between cells.

My efforts:

I managed to make some of the functions worked, like drag into a droppable
But I can't make the dragged draggable removed because there is no ajax event drag in p:draggable to pass data to back bean, as I did drop event in p:droppable.(There is a way of using JQuery draggable event start and stop to pass the col and row num to back bean but I am not sure it's a good way to go)
I don't think my implementation is the right way to do it since there are some bizarre bugs, like sometimes the dragged object I get from ddEvent.getData() is not the right one. (I guess it has something to do with the sole dataSource of p:droppable. Issue1469)

Update: I think the main problem is that p:droppable only bind one datasource, so ddEvent.getData() will always get the 'object' from binded datasource, my problem is that I have multiple droppable area and each need to bind multiple datasources .

. Too bad I couldn't post an screenshot...

Here's my code: xthml: Shifts ...

<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 is just a map like container which contains each employee's weekly shifts.

回答1:

You can always drag Drag-Drop from one container to another container.

Say a draggable row in p:table or p:panel within a p:panelgrid (A side) to Droppable p:outPanel (B-side) u'll maintain two List, one for A side and the other for B side.

And make the A-side as droppable and B-side as dragable to have a cyclic Drag-Drop Behaviour(Both will act as datasource to each others droppable tag) and making use of ddEvent.getData to add and remove from the Object List in the controller side.

For the above requirement you can either implement a panelGrid and have multiple relations like this.

Use dragabblerows = "true" and draggableColumns="true" to play around with the rows and columns in the P:table parameter. :p

来源：https://stackoverflow.com/questions/23513975/drag-and-drop-in-nested-datatables

标签

jquery

primefaces

drag-and-drop

draggable

droppable