0 Replies Latest reply on Jun 11, 2008 11:16 AM by Jeff Guinness

    Using an image as a dragIndicator

    Jeff Guinness Newbie

      I am trying to create a page with drag and drop where the user drags a small image and drops it onto a larger image. The below page seems to work for the most part. The 2 images are displayed, the smaller image is draggable, and the dropListener of the larger image gets called when the smalled image is dropped on it. The problem is that the when the smaller image is being dragged, a box is displayed instead of the image. The displayed box is not the default indicator, it is a box the same size as the image but does not display the image. Any help would be appreciated.

      I am using JSF 1.2 and RichFaces 3.2.0.SR1.

      The code is below:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html 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:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">
       <head>
       </head>
       <body>
       <rich:dragIndicator id="imageIndicator" >
       <f:facet name="single" >
       <h:graphicImage value="/common/images/critter-dot.gif"/>
       </f:facet>
       </rich:dragIndicator>
       <rich:dragIndicator id="indicator" />
       <f:view>
       <h:form id="form">
       <h:panelGrid columns="2" width="100%">
       <a4j:outputPanel styleClass="dragTargetPanel">
       <h:graphicImage value="/common/images/critter-dot.gif"/>
       <rich:dragSupport dragIndicator="imageIndicator" dragType="RedDot"/>
       </a4j:outputPanel>
      
       <a4j:outputPanel styleClass="dropTargetPanel">
       <h:graphicImage value="/common/images/critter.gif" alt="critter.gif" />
       <rich:dropSupport id="droppedItems" acceptedTypes="RedDot" dropListener="#{specimenDetailsBean.testProcessDrop}" />
       </a4j:outputPanel>
       </h:panelGrid>
       </h:form>
       </f:view>
       </body>
      </html>