CODEWITHSUNDEEP
htmlgwtdrag-and-drop
Stefan
Stefan

Reputation: 14873

HTML5 Drag and drop only working in Google Chrome

I'm trying out the new Html5 drag and drop functionallty. The implementation was pretty easy and UiBinder offered functionallity to atutomatically create the mathods for

(afaik that's all you need for basic drag and drop with no special effects)

Also setting the Element.DRAGGABLE_TRUE wasn't to difficutl. However the example only works in Google Chrome (and safari I guess). IE and firefox both do nothing (no drag start, no drop, no hover effects what so ever).

Here is a simple UiBinder example I tried out:

package XXXX.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragEvent;
import com.google.gwt.event.dom.client.DropEvent;

public class Test extends Composite {

    private static TestUiBinder uiBinder = GWT.create(TestUiBinder.class);

    @UiField
    Label label;
    @UiField
    Label label_1;

    interface TestUiBinder extends UiBinder<Widget, Test> {
    }

    public Test() {
        initWidget(uiBinder.createAndBindUi(this));
        label.getElement().setDraggable(Element.DRAGGABLE_TRUE);
        label_1.getElement().setDraggable(Element.DRAGGABLE_TRUE);
    }

    @UiHandler(value = { "label", "label_1" })
    void onLabelDragOver(DragOverEvent event) {
    }

    @UiHandler(value = { "label_1" })
    void onDragStart(DragStartEvent event) {
        Element element = label_1.getElement();
        event.getDataTransfer().setDragImage(element, 0, 0);
    }

    @UiHandler(value = { "label" })
    void onDragStart2(DragStartEvent event) {
        Element element = label.getElement();
        event.getDataTransfer().setDragImage(element, 10, 10);
    }

    @UiHandler(value = { "label", "label_1" })
    void onLabelDrag(DragEvent event) {
    }

    @UiHandler(value = { "label", "label_1" })
    void onLabel_1Drop(DropEvent event) {
        Window.alert("bhibhop");
    }
}

And the xml file:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .label{
            height: 100px;
            width: 200px;
            margin: 20px;
            background-color: lightblue;    
        }
    </ui:style>
    <g:HTMLPanel height="500px" width="500px">
        <g:Label ui:field="label_1" styleName="{style.label}"/>
        <g:Label ui:field="label" styleName="{style.label}"/>
    </g:HTMLPanel>
</ui:UiBinder>

Upvotes: 1

Views: 2320

Answers (2)

Krasimir Dimitrov
Krasimir Dimitrov

Reputation: 160

To make the dropEvent work in firefox for any widget you should also add

event.preventDefault()

in the DropHandler in the onDrop method.

Upvotes: 2

Chris Cashwell
Chris Cashwell

Reputation: 22899

My understanding is that in your onDragStart method(s), you need to set some data for the event...

@UiHandler(value = { "label_1" })
void onDragStart(DragStartEvent event) {
    //Required: set data for the event.
    event.setData("text", "drag started!");

    Element element = label_1.getElement();
    event.getDataTransfer().setDragImage(element, 0, 0);
}

Upvotes: 4

Related Questions