Drag and Drop support

[vladomega]

Can I have drag and drop support on the same component?

I want to be able to drag data from a dataTable into an outPut Panel (just like in the example from the demo) but I also want to be able to move the data dropped, somewhere else, in other panel, for example.

[nbelaevski]

Hi,

Yes.

[vladomega]

How? I followed the example from the demo, and on one of the drop support panel i put the definition of a drag support which i take it from the first panel. Made a 3rd panel to accept the drag types from the second panel. I cand drag fro the 1st panel and drop on the 2nd one. I can drag from the 2nd one, on the 3rd one, but in this case nothing is happening. With the debugger, when i try to drag from 2nd to 3rd panel it doesn't enter in dropListener method (DropEvent dropEvent) from the backing bean.

[vladomega]

<rich:panel style="width:133px">
 <f:facet name="header">
 <h:outputText value="Source List" />
 </f:facet>
 <rich:dropSupport id="php2" acceptedTypes="items2" dropValue="items2"
 dropListener="#{registerEvent.processDrop2}" reRender="phptable, src">
 </rich:dropSupport>
 <h:dataTable id="src" columns="1" value="#{registerEvent.events}" var="fm" footerClass="footerClass">
 <h:column>
 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="items" dragValue="#{fm}">
 <rich:dndParam name="label" value="#{fm.name}" />
 </rich:dragSupport>
 <h:outputText value="#{fm.name}"></h:outputText>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>

 <rich:panel styleClass="dropTargetPanel">
 <f:facet name="header">
 <h:outputText value="PHP Frameworks" />
 </f:facet>
 <rich:dropSupport id="php" acceptedTypes="items" dropValue="items"
 dropListener="#{registerEvent.processDrop}" reRender="phptable, src">
 </rich:dropSupport>

 <h:dataTable id="phptable" columns="1" value="#{registerEvent.dataDragged}" var="fm">
 <h:column>
 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="items2" dragValue="#{fm}">
 <rich:dndParam name="label2" value="#{fm.name}" />
 </rich:dragSupport>
 </a4j:outputPanel>
 <h:outputText value="#{fm.name}"></h:outputText>
 </h:column>
 </h:dataTable>
 </rich:panel>

These are the 2 richpanels i used for drag and drop from one another.

The 2 listeners from the backing bean are:

 public void processDrop(DropEvent dropEvent)
 {
 events.remove(dropEvent.getDragValue());
 getDataDraggedStatic().add((Events)dropEvent.getDragValue());
 dataDragged = dataDraggedStatic;
 }

 public void processDrop2(DropEvent dropEvent)
 {
 events.add((Events)dropEvent.getDragValue());
 dataDragged.remove((Events)dropEvent.getDragValue());
 dataDragged = dataDraggedStatic;
 }

[nbelaevski]

Hi,

Works ok for me:

private List<String> events = new ArrayList<String>();
 {
 events.add("Item 1");
 events.add("Item 2");
 events.add("Item 3");
 events.add("Item 4");
 }

 private List<String> dataDragged = new ArrayList<String>();

 public List<String> getEvents() {
 return events;
 }

 /**
 * @return the dataDragged
 */
 public List<String> getDataDragged() {
 return dataDragged;
 }

 /**
 * @param dataDragged the dataDragged to set
 */
 public void setDataDragged(List<String> dataDragged) {
 this.dataDragged = dataDragged;
 }

 /**
 * @param events the events to set
 */
 public void setEvents(List<String> events) {
 this.events = events;
 }

 public void processDrop1(DropEvent dropEvent)
 {
 events.remove(dropEvent.getDragValue());
 dataDragged.add((String) dropEvent.getDragValue());
 }

 public void processDrop2(DropEvent dropEvent)
 {
 events.add((String) dropEvent.getDragValue());
 dataDragged.remove(dropEvent.getDragValue());
 }

 public void processDrop3(DropEvent dropEvent) {
 System.out.println(dropEvent.getDragValue());
 }

<h:form>
<rich:panel style="width:133px">
 <f:facet name="header">
 <h:outputText value="Source List" />
 </f:facet>
 <rich:dropSupport id="php2" acceptedTypes="items2" dropValue="items2"
 dropListener="#{forum5Bean.processDrop2}" reRender="phptable, src">
 </rich:dropSupport>
 <h:dataTable id="src" value="#{forum5Bean.events}" var="fm" footerClass="footerClass">
 <h:column>
 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="items" dragValue="#{fm}">
 <rich:dndParam name="label" value="#{fm}" />
 </rich:dragSupport>
 <h:outputText value="#{fm}"></h:outputText>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>

 <rich:panel styleClass="dropTargetPanel">
 <f:facet name="header">
 <h:outputText value="PHP Frameworks" />
 </f:facet>
 <rich:dropSupport id="php" acceptedTypes="items" dropValue="items"
 dropListener="#{forum5Bean.processDrop1}" reRender="phptable, src">
 </rich:dropSupport>

 <h:dataTable id="phptable" value="#{forum5Bean.dataDragged}" var="fm">
 <h:column>
 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="items2" dragValue="#{fm}">
 <rich:dndParam name="label2" value="#{fm}" />
 </rich:dragSupport>
 <h:outputText value="#{fm}"></h:outputText>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>
 <rich:panel styleClass="dropTargetPanel1">
 <f:facet name="header">
 <h:outputText value="3rd panel" />
 </f:facet>
 <rich:dropSupport acceptedTypes="items2" dropValue="items"
 dropListener="#{forum5Bean.processDrop3}" reRender="phptable, src">
 </rich:dropSupport>
 </rich:panel>
</h:form>

[vladomega]

It still doesn't work:(

This is jsf code:

<rich:panel style="width:133px">
 <f:facet name="header">
 <h:outputText value="Source List" />
 </f:facet>
 <rich:dropSupport id="php2" acceptedTypes="items2" dropValue="items2"
 dropListener="#{registerEvent.processDrop2}" reRender="phptable, src">
 </rich:dropSupport>
 <h:dataTable id="src" columns="1" value="#{registerEvent.events}" var="fm" footerClass="footerClass">
 <h:column>
 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="items" dragValue="#{fm}">
 <rich:dndParam name="label" value="#{fm.name}" type="drag"/>
 </rich:dragSupport>
 <h:outputText value="#{fm.name}"></h:outputText>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>

 <rich:panel styleClass="dropTargetPanel">
 <f:facet name="header">
 <h:outputText value="PHP Frameworks" />
 </f:facet>
 <rich:dropSupport id="php" acceptedTypes="items" dropValue="items"
 dropListener="#{registerEvent.processDrop}" reRender="phptable, src">
 </rich:dropSupport>

 <h:dataTable id="phptable" columns="1" value="#{registerEvent.dataDragged}" var="fm">
 <h:column>
 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
 <rich:dragSupport dragIndicator=":indicator" dragType="items2" dragValue="#{fm}">
 <rich:dndParam name="label" value="#{fm.name}"/>
 </rich:dragSupport>
 <h:outputText value="#{fm.name}"></h:outputText>
 </a4j:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>

The methods from backing bean are the same.

I think the problem is on the client because it doesn't enter in the listener #{registerEvent.processDrop2}
when i dragged from the 2nd panel into the 1st one.

[nbelaevski]

What is RF/JSF version? Does the posted code work for you?

[vladomega]

Your posted code, doesn't work for me.

My richfaces version is 3.3.1 and JSF 1.2 and i'm using richfaces as the JSF implementation.

[vladomega]

And if you saw in my code, i had to use a static version to keep the objects. If i had used only one vector, a non-static one, i wouldnt have been able to have more than one element in the drop panel, because everytime i would have drag and drop an element, the list that was suposed to keep all the elements, was reinitializing each time. So thats why i had this workaround, a static vector for keeping the elements. And after this i make

eventsList = staticEventsList
You can see it exactly in the bean code.

[nbelaevski]

"vladomega" wrote:
i'm using richfaces as the JSF implementation.

Can you please clarify?

[vladomega]

In the properties of my project (I am using eclipse) at Java Build Path there is richfaces library. If I edit that library, to replace the jar's with some other richfaces version, in case i want that, there is a box where i can check if the library is JSF implementation or not. Mine is checked.
I'm using Seam for developing my project and seam-gen plugin from JBoss Tools for making the poject at the first time.

[vladomega]

In the properties of my project (I am using eclipse) at Java Build Path there is richfaces library. If I edit that library, to replace the jar's with some other richfaces version, in case i want that, there is a box where i can check if the library is JSF implementation or not. Mine is checked.
I'm using Seam for developing my project and seam-gen plugin from JBoss Tools for making the poject at the first time.

[nbelaevski]

"vladomega" wrote:
And if you saw in my code, i had to use a static version to keep the objects. If i had used only one vector, a non-static one, i wouldnt have been able to have more than one element in the drop panel, because everytime i would have drag and drop an element, the list that was suposed to keep all the elements, was reinitializing each time. So thats why i had this workaround, a static vector for keeping the elements. And after this i make

eventsList = staticEventsList
You can see it exactly in the bean code.

Yeah, it can be named using "static" word for another reason, so I didn't pay attention. Do not use static, it will not allow you to use this in multi-user environment; use conversation or session scope. Also static variables can also be uninitialized if class gets unloaded.

[vladomega]

Yes, but the main question still remains..why doesn't work for me to have drag and drop support on the same component?

[nbelaevski]

Are you using the latest JSF version?