HTML5 Drag and drop работает только в Google Chrome

Question

Я пробую новую функцию перетаскивания Html5. Реализация была довольно простой, и UiBinder предложил функциональность для автоматического создания методов для

• onDragStart
• OnDrop

(на самом деле это все, что вам нужно для простого перетаскивания без специальных эффектов)

Также установка Element.DRAGGABLE_TRUE не была сложной. Однако пример работает только в Google Chrome (и сафари, я думаю). IE и Firefox ничего не делают (без начала перетаскивания, без перетаскивания, без эффектов наведения).

Вот простой пример UiBinder, который я опробовал:

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");
    }
}

И XML-файл:

<!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> 

Answer 1

Насколько я понимаю, в вашем onDragStart методе (ах) вам нужно установить некоторые данные для события ...

@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);
}

Answer 2

Чтобы DropEvent работал в Firefox для любого виджета, вы также должны добавить

event.preventDefault() 

в DropHandler в методе onDrop.