HTML5 Google Chromeでドラッグ＆ドロップのみ

Question

私は新しいHtml5ドラッグアンドドロップfunctionalltyを試しています。実装はかなり簡単だったとUiBinderサンプルメッセージはatutomatically

• onDragStart
• onDrop

（それはあなたが基本的なドラッグのために必要と特別な効果をドロップするすべてです私の知る限り）

ためmathodsを作成するためにfunctionallityを提供しました

また、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

To mあなたが追加する必要がある任意のウィジェットのためのfirefoxでdropEventの作業を追加する

event.preventDefault() 

onHroplerのonDropメソッドで。