8 Replies Latest reply on Jan 12, 2010 10:15 AM by Ilya Shaikovsky

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

    antonio gallo Newbie

      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

        • 1. Re: drag and drop problem
          Ilya Shaikovsky Master

          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?

          • 2. Re: drag and drop problem
            antonio gallo Newbie

            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>

            • 3. Re: drag and drop problem
              Ilya Shaikovsky Master

              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>
              • 4. Re: drag and drop problem
                antonio gallo Newbie

                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.

                • 5. Re: drag and drop problem
                  antonio gallo Newbie

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

                   

                  This is the web application structure:

                   

                   

                  drag-drop.jpg

                   

                   

                  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>

                  • 6. Re: drag and drop problem
                    Ilya Shaikovsky Master

                    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.

                    • 7. Re: drag and drop problem
                      antonio gallo Newbie

                      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.

                      • 8. Re: drag and drop problem
                        Ilya Shaikovsky Master

                        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.