HTML5 Google 크롬에서만 작동하는 드래그 앤 드롭

Question

나는 새로운 Html5 드래그 앤 드롭 기능을 시도하고 있습니다. 구현은 매우 간단했고 UiBinder는 atutomatically

• 에 대한
• onDrop

onDragStart을 mathods을 만들 수 functionallity을 제공

(즉, 당신이 기본적인 드래그를 위해 필요없이 특수 효과를 떨어 전부 AFAIK)

또한 Element.DRAGGABLE_TRUE을 설정하는 것은 어렵지 않습니다. 그러나이 예는 Google 크롬에서만 작동합니다 (그리고 내가 생각한 사파리). IE와 파이어 폭스 모두 아무것도하지 않습니다 (드래그 시작, 드롭 없음, 호버 효과가 없습니다).

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 방법 (들)에, 당신은 를 설정해야한다는 것입니다 여기에

내가 밖으로 시도하는 간단한 UiBinder의 예입니다 이벤트에 대한 일부 데이터 ...

@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 FireWire의 dropEvent가 any widget에 대해서도 추가해야합니다.

event.preventDefault() 

onDrop 메서드의 DropHandler에 있습니다.