How to get the dropzone to highlight when draged over

[harpritt]

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

[ilya_shaikovsky]

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"

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,.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.

[harpritt]

Thats flipping great Ilya! thank you dude.

[ilya_shaikovsky]

he he sorry forgot one more handler

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

to remove highlight on drop

[harpritt]

All done, worked really well, cheers dude!