Question

我正在使用primeface 4.0。

主要表面showcase仅显示如何将draggable拖入droppable。但是，如何将draggable 拖出，droppable永远不会被提及。

我想创建一个dataTable：

每个td都会设置一个droppable小组，其中多个draggable可以被拖入，拖出。
这个dataTable的“保存数据”的后端bean对象，我假设如果dataTable是2 * 2，则后端bean中将有4个List，每个都存储一个对应的draggable对象列表droppable区域。

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

我的努力：

我设法让一些功能发挥作用，比如拖入droppable
但我无法使拖动的draggable 移除，因为{{1}中没有ajax事件drag将数据传递给后台bean，就像我在p:draggable中做drop事件一样。（有一种方法可以使用JQuery可拖动事件p:droppable和start来传递col和row num to back bean但我不确定这是一个好方法去）
我不认为我的实现是正确的方法，因为有一些怪异的错误，就像我从stop获得的拖动对象有时不是正确对象，真爱。（我想它与ddEvent.getData()的唯一数据源有关。Issue1469）

更新我认为主要问题是p:droppable只绑定一个数据源，因此p:droppable总是从绑定数据源获取'对象'，我的问题是我有多个可放置区域并且每个需要绑定多个数据源。

。太糟糕了，我无法发布截图...

这是我的代码： XTHML：转移 ...

ddEvent.getData()

回bean：

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

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); }只是一个像容器一样的地图，其中包含每位员工的每周班次。

Answer 1

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

在p：table或ap：panelgrid（A侧）中的p：panel中将可拖动的行说成Droppable p：outPanel（B侧），您将维护两个List，一个用于A侧，另一个用于B侧

并使A面可拖放，而B面可拖动，以产生循环的Drag-Drop行为（两者都将作为彼此的数据源可放置标签），并利用ddEvent.getData来添加和删除控制器端的对象列表。

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

OR

使用dragabblerows =“ true”和draggableColumns =“ true”来处理P：table参数中的行和列。：p

在嵌套的dataTable中拖放

1 个答案: