drag and drop problem still not solved... please help me.

[agallo73]

Hello, I'm in troubles with drag and drop.

I read the documentation and tried the drag-drop demo but dragging does not work

It seems that the decalaration <rich:dragSupport dragIndicator=":indicator" overrides the defaul behaviour and makes no dragging succeed at all when moving the elements.

If I comment out

<rich:dragSupport dragIndicator=":indicator"

in the code shipped with the demo  I saw a default rectangle show up since the default behaviour takes place. The rectangle gets red or green while approaching the containers (PHP, .NET...) and then dropping works even if I do not see any label and image as the demo suggests.

I need to customize the dragging behaviour of my application in order to show an image and a label when dragging elements in a way that looks like what  the demo suggests but I'm trying everything without success. Every time i decalre a new dragindicator and use it passing the proper index everything blockd working as far as dragging is concerned.

I also tried with the last 3.3.3 libraries but nothing changed.

May someone give me a piece of advice about this problem?

Do you know if there's some problem that must be addressed?

Please help me.

Thanks ain advance.

Antonio

[ilya_shaikovsky]

1) please add code snippets.

and

everything blockd working as far as dragging is concerned.

not sure that fully understand this. could you please clarify?

[agallo73]

The code is what can be downloaded from the demo site and is attached below:

The row which cause problems to occurr is displayed in bold.

When you try to use a dragindicator defined in any way, also with the <facelet... simple....> it's no longer possible to see any dragging since it does not occurr anymore when trying to move some elements.

I'm running the demo with richfaces 3.3* version and jboss 5.0 or 5.1 but nothing changes.

Can you please help me?

Thanks very much.

<ui:composition 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:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <style>
        .panelc {
            width:25%;
            vertical-align:top;        
        }
       
        .dropTargetPanel {
            width: 90%;
        }

        .footerClass {
            text-align: center;
            padding-top: 5px;
        }

    </style>

    <rich:dragIndicator id="indicator" />

    <h:form id="form">

        <h:panelGrid columnClasses="panelc" columns="4" width="100%">

            <rich:panel style="width:133px">
                <f:facet name="header">
                    <h:outputText value="Source List" />
                </f:facet>
                <h:dataTable id="src" columns="1" value="#{dndBean.frameworks}"
                    var="fm" footerClass="footerClass">

                    <h:column>
                        <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px"
                            layout="block">
                            <rich:dragSupport dragIndicator=":indicator"
                                dragType="#{fm.family}" dragValue="#{fm}">
                                <rich:dndParam name="label" value="#{fm.name}" />
                            </rich:dragSupport>
                            <h:outputText value="#{fm.name}"></h:outputText>
                        </a4j:outputPanel>
                    </h:column>
                    <f:facet name="footer">
                        <a4j:commandButton action="#{dndBean.reset}" value="Start Over" reRender="src,phptable,cftable,dnettable"/>
                    </f:facet>
                </h:dataTable>
            </rich:panel>

            <rich:panel styleClass="dropTargetPanel">
                <f:facet name="header">
                    <h:outputText value="PHP Frameworks" />
                </f:facet>
                <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP"
                    dropListener="#{eventBean.processDrop}" reRender="phptable, src">
                </rich:dropSupport>

                <h:dataTable id="phptable" columns="1" value="#{dndBean.containerPHP}" var="fm">
                    <h:column>
                        <h:outputText value="#{fm.name}"></h:outputText>
                    </h:column>
                </h:dataTable>

            </rich:panel>

            <rich:panel styleClass="dropTargetPanel">
                <f:facet name="header">
                    <h:outputText value=".NET Frameworks" />
                </f:facet>
                <rich:dropSupport id="dnet" acceptedTypes="DNET" dropValue="DNET"
                    dropListener="#{eventBean.processDrop}" reRender="dnettable, src">
                </rich:dropSupport>

                <h:dataTable id="dnettable" columns="1" value="#{dndBean.containerDNET}" var="fm">
                    <h:column>
                        <h:outputText value="#{fm.name}"></h:outputText>
                    </h:column>
                </h:dataTable>

            </rich:panel>

            <rich:panel styleClass="dropTargetPanel">
                <f:facet name="header">
                    <h:outputText value="ColdFusion Frameworks" />
                </f:facet>
                <rich:dropSupport id="cf" acceptedTypes="CF" dropValue="CF"
                    dropListener="#{eventBean.processDrop}" reRender="cftable, src">
                </rich:dropSupport>

                <h:dataTable id="cftable" columns="1" value="#{dndBean.containerCF}" var="fm">
                    <h:column>
                        <h:outputText value="#{fm.name}"></h:outputText>
                    </h:column>
                </h:dataTable>
            </rich:panel>
        </h:panelGrid>

    </h:form>
     <a4j:outputPanel ajaxRendered="true">
        <h:messages></h:messages>
    </a4j:outputPanel>
</ui:composition>

[ilya_shaikovsky]

tried to customize in this way and it works:

<rich:dragSupport dragIndicator=":indicator"

dragType="#{fm.family}" dragValue="#{fm}">

                   <rich:dndParam name="label" value="#{fm.name}" />

                   <rich:dndParam name="accept" value="images/icons/icon1.png"/>

                   <rich:dndParam name="reject" value="images/icons/icon2.gif"/>

                   <rich:dndParam name="default" value="images/icons/icon3.gif"/>

</rich:dragSupport>

     <rich:dragIndicator id="indicator" >

          <f:facet name="single">

               <h:panelGroup>

                    <h:graphicImage value="/{marker}" />

                    <h:outputText value="{label}" />

               </h:panelGroup>

          </f:facet>

     </rich:dragIndicator>

[agallo73]

I changed the code following your suggestion but it does not work any more.

I do not see any dragging when trying to move the elements.

I used three images and put them under the web content/images/icons folder.

Nothing happened any more.

I also do not understand well this expression and why there's the escaping / before marker.:

<h:graphicImage value="/{marker}" />

Can you please help me?

I do not see any dragging when trying to move some element.

[agallo73]

I do not succeed in making dragging work as you say.

This is the web application structure:

and this is the code:

<ui:composition 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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

    <style>
.panelc {
    width: 25%;
    vertical-align: top;
}

.dropTargetPanel {
    width: 90%;
}

.footerClass {
    text-align: center;
    padding-top: 5px;
}
</style>

    <rich:dragIndicator id="indicator">
        <f:facet name="single">
            <h:panelGroup>
                <h:graphicImage value="/{marker}" />
                <h:outputText value="{label}" />
            </h:panelGroup>
        </f:facet>
    </rich:dragIndicator>

    <h:form id="form">

        <h:panelGrid columnClasses="panelc" columns="4" width="100%">

            <rich:panel style="width:133px">
                <f:facet name="header">
                    <h:outputText value="Source List" />
                </f:facet>
                <h:dataTable id="src" columns="1" value="#{dndBean.frameworks}"
                    var="fm" footerClass="footerClass">

                    <h:column>
                        <a4j:outputPanel
                            style="width:100px;border:1px solid gray;padding:2px"
                            layout="block">
                            <rich:dragSupport dragIndicator=":indicator"
                                dragType="#{fm.family}" dragValue="#{fm}">
                                <rich:dndParam name="label" value="#{fm.name}" />
                                <rich:dndParam name="accept" value="/images/accept.gif" />
                                <rich:dndParam name="reject" value="/images/reject.gif" />
                                <rich:dndParam name="default" value="/images/default.gif" />
                            </rich:dragSupport>

                            <h:outputText value="#{fm.name}"></h:outputText>
                        </a4j:outputPanel>
                    </h:column>
                    <f:facet name="footer">
                        <a4j:commandButton action="#{dndBean.reset}" value="Start Over"
                            reRender="src,phptable,cftable,dnettable" />
                    </f:facet>
                </h:dataTable>
            </rich:panel>

            <rich:panel styleClass="dropTargetPanel">
                <f:facet name="header">
                    <h:outputText value="PHP Frameworks" />
                </f:facet>
                <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP"
                    dropListener="#{eventBean.processDrop}" reRender="phptable, src">
                </rich:dropSupport>

                <h:dataTable id="phptable" columns="1"
                    value="#{dndBean.containerPHP}" var="fm">
                    <h:column>
                        <h:outputText value="#{fm.name}"></h:outputText>
                    </h:column>
                </h:dataTable>

            </rich:panel>

            <rich:panel styleClass="dropTargetPanel">
                <f:facet name="header">
                    <h:outputText value=".NET Frameworks" />
                </f:facet>
                <rich:dropSupport id="dnet" acceptedTypes="DNET" dropValue="DNET"
                    dropListener="#{eventBean.processDrop}" reRender="dnettable, src">
                </rich:dropSupport>

                <h:dataTable id="dnettable" columns="1"
                    value="#{dndBean.containerDNET}" var="fm">
                    <h:column>
                        <h:outputText value="#{fm.name}"></h:outputText>
                    </h:column>
                </h:dataTable>

            </rich:panel>

            <rich:panel styleClass="dropTargetPanel">
                <f:facet name="header">
                    <h:outputText value="ColdFusion Frameworks" />
                </f:facet>
                <rich:dropSupport id="cf" acceptedTypes="CF" dropValue="CF"
                    dropListener="#{eventBean.processDrop}" reRender="cftable, src">
                </rich:dropSupport>

                <h:dataTable id="cftable" columns="1" value="#{dndBean.containerCF}"
                    var="fm">
                    <h:column>
                        <h:outputText value="#{fm.name}"></h:outputText>
                    </h:column>
                </h:dataTable>
            </rich:panel>
        </h:panelGrid>

    </h:form>
    <a4j:outputPanel ajaxRendered="true">
        <h:messages></h:messages>
    </a4j:outputPanel>
</ui:composition>

[ilya_shaikovsky]

1) you not see no label and marker both? Or see just label and marker image not found?

If you see label but not marker - try please then change you parameters to

                                <rich:dndParam name="accept" value="images/accept.gif" />
                                <rich:dndParam name="reject" value="images/reject.gif" />
                                <rich:dndParam name="default" value="images/default.gif" />

2) if no dragindicator seen at all. please just try for check to changed h:table to rich:table.

3) if nothing helps provide sample in war file. It will be much more faster to just run investigate and post corrections for your code there then.

[agallo73]

Hello Ilya, I tried your suggestions again but nothing happened . I can not see anything.

No label and neither images appear.

I just attached the war file so that you can give a look and discover the problem, if any.

Thanks very much.

Bye.

[ilya_shaikovsky]

solved by just addition of highlighted elements to the page. You not used any templates so you have to define them at the page for sure.

 
<ui:composition 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:a4j="http://richfaces.org/a4j"
     xmlns:rich="http://richfaces.org/rich">
 

<html>
<body>
 <f:view>
 
//your content there
 
 </f:view>
</body>
</html>
</ui:composition>

thats why d'n'd was failed to initialize at all. And b.t.w. enabling firebug console shows js errors for me. So keep it enabled if it's automatically disabled in your case.