page error trying basic Drag-n-Drop

[jgreene]

Hello -
I'm trying to get a basic d-n-d working using the RF dnd support. I want to be able to drag an image icon from one section of the page to the other, and right now, I'm just working on the drag part. Here's the snippet of how I have the code right now:

<h:panelGroup>
 <h:graphicImage id="icon_1" url="some_img1.ico">
 <rich:dragSupport dragType="item"/>
 </h:graphicImage>

 <h:graphicImage id="icon_2" url="some_img2.ico">
 <rich:dragSupport dragType="item"/>
 </h:graphicImage>
</h:panelGroup>

I get the following error message when I try to load the page:

drag: Element with [layoutForm:icon_2] ID was not found in the DOM tree. Probably element has no client ID or client ID hasn't been written. DnD's disabled. Check please!

Note that I realize I may have the code totally wrong, since I know this is probably a very simple example. However, I don't know why I'm getting a message indicating that an id is not found, since I have given each image an ID. Thanks for any help.

- JG

[jgreene]

I've figured out how to do the basic drag. I haven't used many of the attributes, but at least I'm dragging an image.

When I add dropSupport, do I actually have to have an action method on the back end, or should I just be able to drop the dragged item somewhere on the page, as long as the area that I drag it to is coded properly?

- JG

[sergeysmirnov]

a4j:dropSupport has dropListener where information about dropped object is available. In addition, you can fill the f:param or a4j:actionParam that will be also available on the server side.
There is no any predefined behavior on the client or server sides. I.e. you need to provide your own logic what happen on the server side and what is changed on the client side when drop occurs.
See http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf?c=dropSupport

[jgreene]

Thanks, Sergey. But I've tried to look at this demo before, and although it is useful, it has no server side code to look at. Besides, this example looks like it probably uses lists, which is a little easier to figure out how to work with on the server. But I'm trying to drag an image icon onto a larger image and make it stick. Although it may be easy, its not obvious to me how to make it work. At least it would be good to see the server side code in your example.

[sergeysmirnov]

"jgreene" wrote:
.... it has no server side code to look at.....

The link to the source code of richfaces-demo is always available in the "RichFaces Most Important Links" post. (See in my signature below).

[jgreene]

Thanks, Sergey.

[adam_p_wells]

"jgreene" wrote:
I've figured out how to do the basic drag. I haven't used many of the attributes, but at least I'm dragging an image.

I am still stuck with this error - could you please give some hints about how you did the basic drag?

I'm using:

JBoss 4.2.1.GA
RichFaces 3.0.2
Seam 2.0.0 Beta

 <rich:dragIndicator id="indicator"></rich:dragIndicator>
 <h:form id="form">

 <h:panelGrid columns="2" width="100%" >

 <rich:panel style="width:100px">
 <f:facet name="header">
 <h:outputText value="Available Roles" />
 </f:facet>
 <h:dataTable id="src" columns="1" value="#{roleList.resultList}" var="role" >
 <h:column>
 <a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="text" dragValue="#{role}" >
 <rich:dndParam name="label" value="#{role}" />
 </rich:dragSupport>
 <h:outputText value="#{role.name}"></h:outputText>
 </a4j:outputPanel>
 </h:column>

 </h:dataTable>
 </rich:panel>

 <rich:panel>
 <f:facet name="header">
 <h:outputText value="Assigned Roles" />
 </f:facet>
 <rich:dropSupport id="assigenedRolesDrop" acceptedTypes="text" dropValue="role.name" reRender="assignedRoles, src"/>

 <h:dataTable id="assignedRoles" columns="1" value="#{contact.roles}" var="role">
 <h:column>
 <h:outputText value="#{role.name}"></h:outputText>
 </h:column>
 </h:dataTable>
 </rich:panel>

 </h:panelGrid>
 </h:form>
 </rich:tab>