jquery - 在嵌套数据表中拖放

Question

我正在使用 primeface 4.0。

primeface showcase仅显示如何拖动 draggable进入droppable 。 但是如何拖动那个draggable 出于 droppable从未被提及。

我想制作一个数据表:

1. 每个td包含 droppable面板有哪些draggable可以拖入和拖出。
2. 一个后台bean对象，“保存数据”这个dataTable，我假设如果dataTable是2*2，后台bean中会有4个List，每个List存储draggable的列表对应droppable的对象面积。

有点像 p:schedule 的简单版本允许在单元格之间拖放事件。

我的努力:

1. 我设法使一些功能正常工作，例如拖入 droppable

2. 但是我无法拖动 draggable 已删除，因为没有 ajax 事件 drag在p:draggable将数据传递给 back bean，就像我所做的 drop事件p:droppable (有一种方法可以使用 JQuery 可拖动事件 start 和 stop 将 col 和 row num 传递给 back bean，但我不确定这是一个好方法)

3. 我认为我的实现不是正确的方法，因为存在一些奇怪的错误，例如有时我从 ddEvent.getData() 获得的拖动对象不是正确的。 (我猜这与p:droppable的唯一数据源有关。Issue1469)

<小时/>

更新: 我认为主要问题是p:droppable只绑定(bind)一个数据源，所以ddEvent.getData()总是会从绑定(bind)的数据源获取“对象”，我的问题是我有多个可放置区域，并且每个区域都需要绑定(bind)多个数据源。

<小时/>

。 可惜我无法发布屏幕截图...

这是我的代码: xthml: 转变 ...

<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>

后 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只是一个类似 map 的容器，其中包含每个员工每周的类次。

Answer 1

您始终可以将拖放操作从一个容器拖放到另一个容器。

将 p:table 或 p:panel 中的 p:panelgrid(A 侧)中的可拖动行到 Droppable p:outPanel(B 侧)，您将维护两个列表，一个用于 A 侧，另一个用于 B 侧.

并使 A 端可放置，B 端可拖动，以具有循环拖放行为(两者都将充当彼此可放置标签的数据源)，并使用 ddEvent.getData 从 Controller 端的对象列表。

对于上述要求，您可以实现一个 panelGrid 并具有像这样的多个关系。

或者

使用drabbblerows = "true"和draggableColumns="true"来处理P:table 参数中的行和列。 :p