How to highlight the dropzone when it is draged over

Version 3

    And correction to topic. to highlight only when acceptable drag hovers the drop zone.

     

    The feature is 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')"

                             ondrop="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. Other remained unmodified as it was in original example.

     

    This document was generated from the following discussion: How to get the dropzone to highlight when draged over