Set drag and drop image in GWT 2.4

Question

I need to implement drag and drop for cells in CellTable . Following the MobileWebApp example, I implemented a custom draggable cell:

 public class DraggableCell extends AbstractCell<ProductProxy>{ interface Templates extends SafeHtmlTemplates { @SafeHtmlTemplates.Template("<div draggable=\"true\">{0}</div>") SafeHtml simpleTextTemplate(String text); } protected Templates templates = GWT.create(Templates.class); public DraggableCell() { super("dragstart"); } @Override public void render(Context context, ProductProxy value, SafeHtmlBuilder sb){ sb.append(templates.simpleTextTemplate(value.getName())); } @Override public void onBrowserEvent(Context context, Element parent, ProductProxy value, NativeEvent event, ValueUpdater<ProductProxy> valueUpdater) { final Integer cursorOffsetX = 0; final Integer cursorOffsetY = 0; if ("dragstart".equals(event.getType())) { // Save the ID of the entity DataTransfer dataTransfer = event.getDataTransfer(); dataTransfer.setData("text", value.getId()); SafeHtmlBuilder sb = new SafeHtmlBuilder(); sb.appendEscaped(value.getSn()); Element element = DOM.createDiv(); element.setInnerHTML(sb.toSafeHtml().asString()); // Set the helper image. dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY); } } 

I use a new element for the drag and drop image (in MobileWebApp they just use the parent element), but, unfortunately, the image does not appear during drag and drop. I thought that perhaps the new element needs to be bound to the DOM first, so I created a helperPanel and bound the element to it:

 DOM.getElementById("dragHelperPanel").appendChild(element); // Set the helper image. dataTransfer.setDragImage(element, cursorOffsetX, cursorOffsetY); 

This works fine in Firefox 6, but no luck in Chrome (using the latest stable version), so maybe this is not the right way to do this. Any ideas? Thanks!

Answer 1

You can try the GWT drag and drop API. I used it and its good even on mobile devices.

http://code.google.com/p/gwt-dnd/

Try the demo here,

http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html

It is quite simple to implement and there are still no problems.