DnD Panel

[jberdat]

Hi,

I'm trying to build an example to drag and drop one panel in another.
With the code below I can drag it, I'm catching the drop event, unfortunatly, it's not rendering correctly. Anyone can see what I'm doing wrong?

RichFace 3.2.0

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <style>
 .panelc {
 width:100%;
 vertical-align:top;
 }

 .dropTargetPanel {
 width: 90%;
 }

 .footerClass {
 text-align: center;
 padding-top: 5px;
 }
 </style>

 <rich:dragIndicator id="indicator" />

 <h:form id="form">
 <h:panelGrid columnClasses="panelc" columns="3" width="100%">
 <a4j:outputPanel id="in1" layout="block" ajaxRendered="true">
 <rich:panel id="ina" width="50%">
 <rich:dragSupport dragType="singleItems">
 </rich:dragSupport>
 <f:facet name="header">TOP</f:facet>
 </rich:panel>
 </a4j:outputPanel>

 <a4j:outputPanel id="out1" layout="block" ajaxRendered="true">
 <rich:dropSupport reRender="in1,toto" acceptedTypes="singleItems" dropListener="#{portfolio.addEvent}">
 </rich:dropSupport>
 <rich:panel id="toto" width="50%">
 <f:facet name="header">TOP</f:facet>
 </rich:panel>
 </a4j:outputPanel>
 </h:panelGrid>
 </h:form>

 <a4j:outputPanel ajaxRendered="true">
 <h:messages></h:messages>
 </a4j:outputPanel>

</ui:composition>

And bean event:

 public void addEvent(DropEvent arg0) {
 UIComponent targetPanel = ((UIComponentBase)arg0.getComponent()).getParent();
 UIComponent sourcePanel = ((UIComponentBase)arg0.getDraggableSource()).getParent();
 /** Add source in target panel */
 targetPanel.getChildren().add(sourcePanel);
 sourcePanel.getParent().getChildren().remove(sourcePanel);
 //Object a = arg0.getSource();
 //Object d = arg0.getDraggableSource();
 //Object e = arg0.getDraggableSource().getDragValue();
 //System.out.println("sss");
 }