3 Replies Latest reply on Jan 9, 2008 1:46 PM by Kevin Taylor

    drag and drop woes

    Kevin Taylor Newbie

      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>