4 Replies Latest reply on Nov 22, 2010 4:20 AM by harpritt k

    How to get the dropzone to highlight when draged over

    harpritt k Novice

      Hi all

       

      im trying to get a drop zone (treenode) to highlight when i drag an acceptable drag element over it.

       

      ive a partial solution whereby i use jquery to identify the dropzone through the highlighted class, i call my query via ondropenter..... but im not happy with this.

       

      whats the "right" way to do this. is there a way to get a handle on the drop zone via ondropenter ?

       

      Kind Regards

       

      Harpritt

        • 1. Re: How to get the dropzone to highlight when draged over
          Ilya Shaikovsky Master

          missed out of the box but I created simple sample of how that could be done. Just modified rf-demo page to:

           

          <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          <style>
          .panelc {
          width: 25%;
          vertical-align: top;
          }
          .dropTargetPanel,.dropTargetPanel3 {
          width: 90%;
          }
          .footerClass {
          text-align: center;
          padding-top: 5px;
          }
          .green {
          border: 3px solid green;
          }
          </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" ondragstart="window.dragged='#{fm.family}';"
          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="dropTargetPanel3">
          <f:facet name="header">
          <h:outputText value="ColdFusion Frameworks" />
          </f:facet>
          <rich:dropSupport id="cf" acceptedTypes="CF" dropValue="CF"
          ondragenter="if (window.dragged=='CF') jQuery('.dropTargetPanel3').addClass('green')"
          ondragexit="jQuery('.dropTargetPanel3').removeClass('green')"
          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>

          <style>

          .panelc {

               width: 25%;

               vertical-align: top;

          }

           

          .dropTargetPanel,.dropTargetPanel3 {

               width: 90%;

          }

           

          .footerClass {

               text-align: center;

               padding-top: 5px;

          }

           

          .green {

               border: 3px solid green;

          }

          </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" ondragstart="window.dragged='#{fm.family}';"

                                                  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="dropTargetPanel3">

                              <f:facet name="header">

                                   <h:outputText value="ColdFusion Frameworks" />

                              </f:facet>

                              <rich:dropSupport id="cf" acceptedTypes="CF" dropValue="CF"

                                   ondragenter="if (window.dragged=='CF') jQuery('.dropTargetPanel3').addClass('green')"

                                   ondragexit="jQuery('.dropTargetPanel3').removeClass('green')"

                                   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>

          NOTE: the third drop zone getting highlighted when there is acceptable drop.

          • 2. Re: How to get the dropzone to highlight when draged over
            harpritt k Novice

            Thats flipping great Ilya! thank you dude.

            • 3. Re: How to get the dropzone to highlight when draged over
              Ilya Shaikovsky Master

              he he sorry forgot one more handler

               

              ondrop="jQuery('.dropTargetPanel3').removeClass('green')"

               

              to remove highlight on drop

              • 4. Re: How to get the dropzone to highlight when draged over
                harpritt k Novice

                All done, worked really well, cheers dude!