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:
<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
Comments