1 Reply Latest reply on May 31, 2007 1:12 PM by Cliff Wiggs

    dropSupport in a rich:Panel

    Cliff Wiggs Newbie

      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>