dropSupport in a rich:Panel
The below code works for dragging items from the left table to the right and back. What I'm curious about is WHERE I can drop within the panel.
In the dnd demo, you can drop anywhere in the panel that has dropSupport.
In my sample, I can drop on the header facet, the (child) dataTable, or the body of the panel that exists above the dataTable.
I can not drop inside the body of the panel below the dataTable or to the left/right of the dataTable. I can provide screenshots if this description is not clear.
The way i understand dropSupport, the entire panel should be a droppable area and not have these 'holes' in it.
I am using the Richfaces and Ajax4JSF jar's from 'richfaces-3.0.1-20070522.001528-60-bin.zip' and my browser is IE6sp2
Bean
package demo.web;
import java.util.ArrayList;
import java.util.List;
import org.ajax4jsf.dnd.event.DropEvent;
public class DemoBean {
private List<String> demoListLeft;
private List<String> demoListRight;
public DemoBean(){
demoListLeft = new ArrayList<String>();
demoListLeft.add("Foo");
demoListLeft.add("Bar");
demoListRight = new ArrayList<String>();
demoListRight.add("Lorem");
demoListRight.add("Ipsum");
}
public void processDrop(DropEvent event){
if(event.getDropValue().equals("left")){
demoListLeft.add(event.getDragValue().toString());
demoListRight.remove(event.getDragValue().toString());
}else{
demoListRight.add(event.getDragValue().toString());
demoListLeft.remove(event.getDragValue().toString());
}
}
public List<String> getDemoListLeft() {
return demoListLeft;
}
public void setDemoListLeft(List<String> demoListLeft) {
this.demoListLeft = demoListLeft;
}
public List<String> getDemoListRight() {
return demoListRight;
}
public void setDemoListRight(List<String> demoListRight) {
this.demoListRight = demoListRight;
}
}
JSP
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<HTML>
<HEAD> <title>Demo Page</title> </HEAD>
<body bgcolor="white">
<f:view>
<h:form id="form">
<rich:dragIndicator id="indicator">
</rich:dragIndicator>
<h:panelGrid columns="2">
<rich:panel>
<f:facet name="header">
<h:outputText value="Left" />
</f:facet>
<rich:dropSupport id="leftDrag" acceptedTypes="right" dropValue="left" dropListener="#{demo.processDrop}" reRender="leftList,rightList">
</rich:dropSupport>
<rich:dataTable id="leftList" value="#{demo.demoListLeft}" var="demo">
<rich:column>
<a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
<rich:dragSupport dragIndicator=":form:indicator" dragType="left" dragValue="#{demo}">
<rich:dndParam name="label" value="#{demo}" />
</rich:dragSupport>
<h:outputText value="#{demo}"/>
</a4j:outputPanel>
</rich:column>
</rich:dataTable>
</rich:panel>
<rich:panel>
<f:facet name="header">
<h:outputText value="Right" />
</f:facet>
<rich:dropSupport id="rightDrag" acceptedTypes="left" dropValue="right" dropListener="#{demo.processDrop}" reRender="leftList,rightList">
</rich:dropSupport>
<rich:dataTable id="rightList" value="#{demo.demoListRight}" var="demo">
<rich:column>
<a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
<rich:dragSupport dragIndicator="form:indicator" dragType="right" dragValue="#{demo}">
<rich:dndParam name="label" value="#{demo}" />
</rich:dragSupport>
<h:outputText value="#{demo}"/>
</a4j:outputPanel>
</rich:column>
</rich:dataTable>
</rich:panel>
</h:panelGrid>
</h:form>
</f:view>
</body>
</HTML>