Question

我正在尝试新的Html5拖放功能。实现非常简单，UiBinder提供了功能，可以自动创建

的方法

onDragStart
onDrop

（afaik这就是基本拖放所需的一切，没有特殊效果）

同样设置Element.DRAGGABLE_TRUE并不是困难的。然而，该示例仅适用于谷歌浏览器（我想是safari）。 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

要使fireEvent在firefox中适用于任何小部件，您还应该添加

event.preventDefault()

在onDrop方法的DropHandler中。

HTML5只能在Google Chrome中使用拖放功能

2 个答案: