【发布时间】：2014-06-24 04:54:40
【问题描述】：
我使用的是 primeface 4.0。
primeface showcase 仅显示如何将draggable 拖入droppable。
但是然后如何将draggable 拖出 那个droppable 从未提及。
我想制作一个数据表：
- 每个
td包含一个droppable面板，其中多个draggable既可以拖入也可以拖出。 - 一个back bean对象，它“保留”这个dataTable的数据，我假设如果dataTable是2*2，那么back bean中会有4个List，每个存储一个
draggable对应@987654331对象的列表@ 区域。
有点像p:schedule 的简单版本，它允许在单元格之间拖放事件。
我的努力：
我设法使一些功能正常工作，例如拖入
droppable但是我不能使拖动的
draggable删除，因为p:draggable中没有ajax 事件drag将数据传回bean，就像我在p:droppable中所做的drop事件一样。（有一种方法可以使用JQuery 可拖动事件start和stop将col 和row num 传递给back bean，但我不确定这是一个好方法去）我不认为我的实现是正确的方法，因为有一些奇怪的错误，比如有时我从
ddEvent.getData()得到的拖动对象不是正确的. （我想这与p:droppable的唯一数据源有关。Issue1469）
更新：
我认为主要问题是p:droppable 只绑定一个数据源，所以ddEvent.getData() 总是会从绑定的数据源中获取“对象”，我的问题是我有 multiple droppable 区域并且每个都需要绑定多个数据源 .
。 可惜不能发截图……
这是我的代码：
xml:
转移
...
<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);
}
tmpSchedule 只是一个类似于容器的地图，其中包含每个员工的每周轮班。
【问题讨论】：
标签： jquery primefaces drag-and-drop draggable droppable