drag and drop woes

[kevcpu411]

I am trying to implement a bi-directional drag and drop using two side by side rich panels. I need to allow a user to drag from the left to the right to indicate a selection and the opposite way to delete an item from their list. I am seeing the dropListener fire but I am not seeing the item move as I drag it. Also, when the drop event is fired, it is not getting drag value using the DropEvent object. How do I handle the need for two dndParams? Below I have a sample of the code. Can someone breakdown what exactly is needed in the code below and what it all means (i.e. dropValue, dragValue, acceptedTypes, dragType, dragIndicator). The documentation is a little cryptic on this one. Also, an example that actually demonstrates how to do a bi-directional drag and drop would be greatly appreciated. Thanks in advance.

 <rich:dragIndicator id="indicator"/>
<h:panelGrid columns="1" styleClass="dragdrop">
 <rich:panel style="width:196px">
 <f:facet name="header">
 <h:outputText value="Available Items" />
 </f:facet>
 <rich:dropSupport id="drpAvailableItems" acceptedTypes="selectedItem" dropValue="selectedItem" dropListener="#{ItemBean.processAvailableItemDrop}" reRender="dtgSelectedItem,dtgAvailableItem">
 </rich:dropSupport>
 <h:dataTable id="dtgAvailableItem" height="150" value="#{itemBean.availableItemList}" var="availableItem" width="192">
 <h:column>
 <a4j:outputPanel style="border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport id="drgAvailableItem" dragIndicator="indicator" dragType="availableItem" dragValue="#{availableItem}">
 <rich:dndParam name="ItemTypeID" value="#{availableItem.itemTypeID}"/>
 <rich:dndParam name="ItemID" value="#{param.ItemID}"/>
 </rich:dragSupport>
 <h:outputLabel id="TypeName" value="#{availableItem.typeName}"></h:outputLabel>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>
</h:panelGrid>
<h:panelGrid columns="1" styleClass="dragdrop">
 <rich:panel style="width:196px">
 <f:facet name="header">
 <h:outputText value="Selected Item" />
 </f:facet>
 <rich:dropSupport id="drpSelectedItem" acceptedTypes="availableItem" dropListener="#{itemBean.processSelectedItemDrop}" reRender="dtgSelectedItem,dtgAvailableItem"></rich:dropSupport>
 <h:dataTable id="dtgSelectedItem" height="150" value="#{itemBean.selectedItemList}" var="selectedItem">
 <h:column>
 <a4j:outputPanel style="border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport id="drgSelectedItem" dragIndicator="indicator" dragType="selectedItem" dragValue="#{selectedItem}">
 <rich:dndParam name="ItemTypeID" value="#{selectedItem.itemTypeID}"/>
 <rich:dndParam name="ItemID" value="#{param.ItemID}"/>
 </rich:dragSupport>
 <h:outputLabel id="TypeName" value="#{selectedItem.typeName}"></h:outputLabel>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>
</h:panelGrid>

[kevcpu411]

Is there a web site where I can download some sample drag and srop tutorials?

[nbelaevski]

rich:dndParam are used to customize drag indicator only, they're not submitted. Use regular f:param/a4j:actionParam to submit values.

You should be seeing default look'n'feel indicator. What RichFaces version are you using?

[kevcpu411]

richfaces version 3.1.1. How should I be using the rich:dndParam tag?