Question

When you go to this page for example : http://grooveshark.com/#!/search?q=stackoverflow and then start dragging any song you get this nice Drag and Drop behavior :

Then, during the Drag and Drop, when you are hovering a zone that accepts the drop, the image under the cursor changes to display that a drop is possible :

Is there any chance to get this kind of thing working with GWT ?

I’ve made a dummy widget for some text, and changing the DragImage after the drag have started, do not seems to work. I’ve also tried changing the cursor, but without success

@Override
        public void onDragOver(DragOverEvent event) {
            dragIndicator.setInnerText("CAN DROP !");
            event.getDataTransfer().setDragImage(dragIndicator,
                    10, 10);
        }  

It’s nice to have the Drag and Drop capabilities, but as I’ve seen here http://allen-sauer.com/com.allen_sauer.gwt.dnd.demo.DragDropDemo/DragDropDemo.html#BinExample we can only modify the hovered element. Am I wrong ?

EDIT

Upon reading the W3C (http://dev.w3.org/html5/spec/dnd.html#the-drag-data-store) I’ve encountered this :

The dropEffect attribute controls the drag-and-drop feedback that the
user is given during a drag-and-drop operation. When the DataTransfer
object is created, the dropEffect attribute is set to a string value.
On getting, it must return its current value. On setting, if the new
value is one of “none”, “copy”, “link”, or “move”, then the
attribute’s current value must be set to the new value. Other values
must be ignored.

However, I didn’t find anything like that in the GWT code, maybe I will try it using JSNI (have to check if it’s a standard or not)

Answer 1

Okay, I’ve managed to change the cursor during the hovering (tested only in FF 15) using JSNI. This is far from being complete and correct.

public class MonWidget extends Widget implements HasAllDragAndDropHandlers {

private DivElement mainDiv;

public MonWidget()
{
    mainDiv = Document.get().createDivElement();

    SpanElement span1 = Document.get().createSpanElement();
    span1.setInnerText("span1");
    span1.setDraggable(Element.DRAGGABLE_TRUE);
    span1.getStyle().setBackgroundColor("red");

    SpanElement span2 = Document.get().createSpanElement();
    span2.setInnerText("span2");
    span2.setDraggable(Element.DRAGGABLE_TRUE);
    span2.getStyle().setBackgroundColor("blue");    

    mainDiv.appendChild(span1);
    mainDiv.appendChild(span2);

    setElement(mainDiv);

    this.addDragStartHandler(new DragStartHandler() {
        public void onDragStart(DragStartEvent event) {

            Element element = Element.as(event.getNativeEvent().getEventTarget());
            event.setData("text", "some data");
            event.getDataTransfer().setDragImage(element,
                    10, 10);        
        }
    });

    this.addDragOverHandler(new DragOverHandler() {

        @Override
        public void onDragOver(DragOverEvent event) {
            setEffet(event.getNativeEvent(),"copy");
            //setEffet(event.getNativeEvent(),"link");
            // THIS do not seems to work - setEffet(event.getNativeEvent(),"move");
            event.stopPropagation();
        }
    });
}
....

And the JSNI method :

public final native void setEffet(NativeEvent e, String effect) /*-{
     var dt = e.dataTransfer;
     dt.dropEffect = effect;
  }-*/;