1 Reply Latest reply on Nov 5, 2007 5:45 PM by jason_foster

    dragIndicator position relative to mouse cursor

      I can't seem to figure out how to make my custom dragindicator maintain it's position relative to the mouse cursor in the same way that the simple default drag indicator (dashed line box) does.

      I would like to be able to have an image in a table column that is draggable and when clicked upon to start the drag have the dragindicator be an identical image with the exact same position relative to the mouse as the image that I clicked on initially to drag.

      Here is a snippet of code from my facelet that I have drag and drop working on, with the exception of this positioning problem:

      <t:dataList value="#{BigPreview.imageList}" first="2" rows="#{BigPreview.imageCount - 4}" var="image">
       <td>
       <t:div id="dnd">
       <img src="#{image.src}" width="#{image.width}" height="#{image.height}" border="0" alt="#{image.alt}" />
       <rich:dragIndicator id="indicator" acceptClass="accept" rejectClass="reject">
       <f:facet name="single">
       {icon}
       </f:facet>
       </rich:dragIndicator>
       <rich:dragSupport dragIndicator="indicator" dragType="img" dragListener="#{BigPreview.processDrag}" dragValue="#{image.src}" rendered="#{image.draggable}">
       <rich:dndParam name="icon">
       <img src="#{image.src}" width="#{image.width}" height="#{image.height}" border="0" alt="#{image.alt}" />
       </rich:dndParam>
       </rich:dragSupport>
       <rich:dropSupport acceptedTypes="img" dropListener="#{BigPreview.processDrop}" dropValue="#{image.src}" rendered="#{image.droppable}" />
       </t:div>
       </td>
      </t:dataList>


      Can someone give me some pointers on what I should be looking at to try and fix this? Is there anything about the dnd components that allows me to control the position of the dragindicator, or do I have to write my own client side javascript to make it work?

        • 1. Re: dragIndicator position relative to mouse cursor

          I just wanted to add some more information to my post in an attempt to explain more thoroughly what it is I'm looking for.

          Basically, I'm wondering if the richfaces drag-n-drop components have the ability to behave like the script.aculo.us drag-n-drop "ghost" option, as well as the cursor placement, and mouse cursor icon change that you can see here:

          http://demo.script.aculo.us/shop

          If someone could just tell me whether or not it's even possible with the current version of richfaces that would be great, because then I would know whether I need to embark on creating my own control for this, using the RichFaces DnD components as a base.

          I know ICEFaces works exactly the way I want (because it uses the exact features from script.aculo.us that I mentioned above), but I don't want to use it due to its incompatilibity with RichFaces and I generally just don't like how you have to use their custom faces servlet to get support for their components.