-
1. Re: How to get the dropzone to highlight when draged over
ilya_shaikovsky Nov 19, 2010 4:44 AM (in response to harpritt)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:outputPanelstyle="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 Nov 19, 2010 5:02 AM (in response to ilya_shaikovsky)Thats flipping great Ilya! thank you dude.
-
3. Re: How to get the dropzone to highlight when draged over
ilya_shaikovsky Nov 19, 2010 8:02 AM (in response to harpritt)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 Nov 22, 2010 4:20 AM (in response to ilya_shaikovsky)All done, worked really well, cheers dude!