Client id's with drag and drop

[friv9821]

I´m having problem identifying which model entity has been dropped on who...

How do I set dragId and dropId on DragDropEvent to meaningful identifiers for entities in my application model? Or is there some other way to reference my application model thru the DragAndDropEvent?

I tried to setting an id, using el, on the draggable/droppable components, which I then thought I could reference thru DragDropEvent.getDragId()/getDropId() in the actionlistener. But this gives me 'Empty id attribute is not allowed'

Code: Select all

<p:panel id="#{modelBean.id}">
	<p:draggable revert="true" helper="clone" />
</p:panel>

<p:panel id="#{anotherModelBean.id}">
	<p:outputPanel>
		<h:outputText>Drop here</h:outputText>
		<p:droppable dropListener="#{controller.onMessageDrop}" tolerance="pointer" onDropUpdate="@form"/>
	</p:outputPanel>
</p:panel>

I read somewhere about el having som immediate syntax ${}, tried that but same problem.

I also read Oleg's post in http://primefaces.prime.com.tr/forum/vi ... f=3&t=2546
But when setting <c:set target="#{component}" property="id" value="#{modelBean.id}"/>

--------------
PrimeFaces-2.2.RC2-SNAPSHOT,
Mojarra 2.0.3,
Spring webflow 2.2.1

[friv9821]

I was successful identifying the target entity using an <f:attribute as below... but how to identify the draggable???

<p:droppable dropListener="#{controller.onMessageDrop}" tolerance="pointer" onDropUpdate="@form">
<f:attribute name="id" value="#{applikationVar.applikationId}"/>
</p:droppable>

public void onMessageDrop(DragDropEvent ddEvent) {
...
ddEvent.getComponent().getAttributes().get("id"));
...
}

[cagatay.civici]

ddEvent's getDragId will return the client id of the component who is draggable, in this case panel. You can then do viewroot.findComponent(dragId) to find the panel and call getId.

Also recent dragdrop enhancements might help;

http://www.primefaces.org/showcase/ui/dragdropHome.jsf

[friv9821]

Thanks, but unfortunately this doesn't help.

For the ddEvent's getDragId to be useful i need it to reference an id from my model (eg. database), so I can do corresponding changes server-side.

One thing i did not mention is that the draggabled droppables are iterated, using ui:repeat, datalist, or datatable.

This is how I want to do, but perhaps there´s another way to accomplish the same thing...

Code: Select all

<ui:repeat value="#{model.draggables}" var="draggable">
<p:panel id="#{draggable.id}">
   <p:draggable revert="true" helper="clone" />
</p:panel>
</ui:repeat>

<ui:repeat value="#{model.droppables}" var="droppable">
<p:panel id="#{droppable.id}">
   <p:outputPanel>
      <h:outputText>Drop here</h:outputText>
      <p:droppable dropListener="#{controller.onMessageDrop}" tolerance="pointer" onDropUpdate="@form"/>
          <!--f:attribute name="id" value="#{applikationVar.applikationId}"/ Can be used to identify this droppable in my model-->
   </p:outputPanel>
</p:panel>
</ui:repeat>

public void onMessageDrop(DragDropEvent ddEvent) {
...
   droppables.get(ddEvent.getDragId()) add( droppables.get( ddEvent.getDragId() ) );
...
}

//Server side model is now consistent with ui changes, and when the view is reloaded, it reflects changes in the model...

// This is kind of same as droppables datasource attribute, only server-side.

[friv9821]

After re-reading the showcase examples I realized that your suggestion should have solved my problem. It didn´t though, since my draggable resides in a different naming container than the droppable.

I solved it by using a "absolute" search expression to find the draggable datasource --> ':form:mydatasource', and using an f:attribute to identify the entity for the droppable.

I still think the api for keeping server-side model synchronized could be simplified though. Perhaps you should consider adding attributes for specifying custom values, using el, to draggable/droppable. These could be used to resolve represented server-side entities by their, for example, id.

Code: Select all

<ui:repeat value="#{model.draggableEntities}" var="draggableEntity">
<p:panel>
   <p:draggable revert="true" helper="clone" value="#{draggableEntity.id}"/>
</p:panel>
</ui:repeat>

<ui:repeat value="#{model.droppableEntities}" var="droppableEntiry">
<p:panel>
   <p:outputPanel>
      <h:outputText>Drop here</h:outputText>
      <p:droppable dropListener="#{controller.onMessageDrop}" tolerance="pointer" onDropUpdate="@form" value="#{droppableEntiry.id}"/>
   </p:outputPanel>
</p:panel>
</ui:repeat>

public void onMessageDrop(DragDropEvent ddEvent) {
...
   droppables.get(ddEvent.getDroppableValue()).add( draggables.get( ddEvent.getDraggableValue() ) );
...

[vinzz38]

Hello, I have the same problem.

I read your solution, but i don't understand : where does the method getDraggableValue() come from ??

Than you for your hlep.

[friv9821]

Thats my fix proposal for changes in the drag and drop api.