HTML 5 native dragover event of DataGrid cell never fired

175 views
Skip to first unread message

js

unread,
Jun 22, 2012, 6:27:43 AM6/22/12
to google-we...@googlegroups.com
Hi,

I've been having hard time trying to make DataGrid rows sortable with HTML 5 native drag and drop.
I have custom Cell which sinks drag events (see below). If I drag the cell dragstart event is fired but visualization of drag operation is not displayed. Moreover dragover event on other cells in DataGrid is also never fired, which I think is cause of the missing visualization of drag operation. It seems like that drag&drop operation is not initialized properly.

I've tried to create test Label (see below) for which everything works OK, i.e. when dragged dragstart is fired (on Label object). When dragged over Datagrid cells the dragover events are fired on cell's object, even drop event is properly fired.

I suspect DataGrid widget that it swallows the event somewhere in it's onBrowserEvent() but I wasn't able to find the place where it happens.

Does anybody has an idea what's wrong here or what do I do wrong?

public class DraggableTextCell extends AbstractCell<String>
{
public DraggableTextCell() 
{
super(
"dragstart",
"drag",
"dragover",
"drop"
);
}

@Override
public void render(
final Context context,
final String value,
final SafeHtmlBuilder sb
)
{
sb.append(mTemplates.textCell(value));
}

@Override
public void onBrowserEvent(
final Context context,
final Element parent,
final String value,
final NativeEvent event,
final ValueUpdater<String> valueUpdater
)
{
final String eventType = event.getType();
if (eventType.equals("dragstart"))
{
log.info("dragStart");
}
else if (eventType.equals(DragEvent.DRAG.nativeType()))
{
log.info("drag");
}
else if (eventType.equals(DragEvent.DRAG_OVER.nativeType()))
{
log.info("dragOver");
}
else if (eventType.equals(DragEvent.DROP.nativeType()))
{
event.preventDefault();
event.stopPropagation();
log.info("drop");
}
}
}


/* Test label */
final Label l = new Label("Draggable");
l.getElement().setDraggable(Element.DRAGGABLE_TRUE);
l.addDragStartHandler(new DragStartHandler() {
@Override
public void onDragStart(final DragStartEvent event)
{
event.setData("text", "test");
}
});

Thomas Broyer

unread,
Jun 22, 2012, 6:58:25 AM6/22/12
to google-we...@googlegroups.com
To properly initiate a drag, you have to set the effectAllowed.
It looks like you'll to use JSNI though, as this property is not exposed by GWT on the DataTransfer object.
Or maybe it's just because you didn't call setData() in your Cell (event.getDataTransfer().setData("text", "test"))

js

unread,
Jun 22, 2012, 7:33:07 AM6/22/12
to google-we...@googlegroups.com
Hi,

actually I have the effectAllowed and dropEffect set via JSNI.

Actually I have already figured out what the problem was: I did not setData() on DataTransfer object. As you also suggested. (Yep, asking a question helps to figure out the answer :)
Anyway thanks for your reply.

TL;TR Solution is to set any data to DataTransfer object of dragstart event. e.g. event.getDataTransfer().setData("text", "anything")

Miltos Miltiadou

unread,
Jul 11, 2012, 12:59:55 PM7/11/12
to google-we...@googlegroups.com
Hi, can you post the sample code for setting the effectAllowed and dropEffect via JSNI?

Thanks in advance.
Miltos

js

unread,
Jul 11, 2012, 2:26:52 PM7/11/12
to google-we...@googlegroups.com
Hi,

here it is. Nothing special.

    private native void setEffectAllowed(DataTransfer dataTransfer, String effect)
    /*-{
        dataTransfer.effectAllowed = effect;
    }-*/;

    private native void setDropEffect(DataTransfer dataTransfer, String effect)
    /*-{
        dataTransfer.dropEffect = effect;
    }-*/;
Reply all
Reply to author
Forward
0 new messages