I've got a problem using the drag drop functionality for items which are contained within a scroll panel. I'm using Tomcat 7.0.14, Primefaces-3.0.M1 and observed the invisible drag items on both IE8 & Firefox 4.
The code below is a simplifed example of the behaviour:
xhtml
Code: Select all
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<h:form>
<p:fieldset id="originField" legend="Users" style="float: left;">
<p:scrollPanel id="userScroll" style="height: 100px; width: 250px;">
<p:dataGrid id="userGrid" var="usr" columns="1"
value="#{myBean.users}"
style="width: 300px; height: 300px; float: left;">
<p:column>
<p:outputPanel id="pn1">
<h:outputText value="#{usr.name}" style="font-weight: 1.0em;" />
</p:outputPanel>
<p:draggable for="pn1" revert="true" opacity="0.7" />
</p:column>
</p:dataGrid>
</p:scrollPanel>
</p:fieldset>
<p:fieldset id="targetField"
style="width: 300px; height:300px; float: right;">
<p:droppable for="targetField" tolerance="touch"
datasource="userGrid" activeStyleClass="ui-state-highlight"
dropListener="#{myBean.myDropListener}" />
</p:fieldset>
Try dragging the test user
names from the left, into the right panel.<br /> Components
"disappear" when dragged beyond the bounds of the containing scroll
panel. <br /> If you remove the scroll panel, it works as I expect. <br />
<br /> Ideally, I'd like to keep the scroll panel (as in my actual
project I have many more than four items) but have the item being
dragged still visible during the drag and drop operation.
</h:form>
</h:body>
</html>
java backing bean and a simple object class
Code: Select all
/**
*
*/
package prime.beans;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.event.DragDropEvent;
@SessionScoped
@ManagedBean(name = "myBean")
public class MyBean {
private User[] users = new User[] { new User("test1"), new User("test2"), new User("test3"),
new User("test4") };
public User[] getUsers() {
return users;
}
public void setUsers(User[] users) {
this.users = users;
}
public void myDropListener(DragDropEvent dde) {
System.out.println("DragId=" + dde.getDragId());
User usr = (User) dde.getData();
System.out.println("Username = " + usr.getName());
// Do other stuff...
}
public class User implements Serializable {
/**
* Auto-generated UID:
*/
private static final long serialVersionUID = 8940872295490375335L;
public User(String aName) {
this.name = aName;
}
private String name;
/**
* @param name
* the name to set
*/
public void setName(String name) {
this.name = name;
}
/**
* @return the name
*/
public String getName() {
return name;
}
}
}
Edit:-
One more thing of note: IE8 does not render the dragged item when dragged over the item above or below it, whereas FF correctly renders it in the entirety of the scroll panel. I'm not sure if that's important or not, but thought I'd point it out nonetheless.
Many thanks,
M.