HTML5拖放只能在Google Chrome中工作

我正在嘗試新的Html5拖放功能。實現是很容易和UiBinder的提供functionallity到atutomatically創建注資方式爲HTML5拖放只能在Google Chrome中工作

onDragStart
onDrop

（據我所知這是你需要的基本的阻力，並沒有什麼特別的效果下降）

也設置Element.DRAGGABLE_TRUE不是difficutl。然而，這個例子只適用於谷歌瀏覽器（我猜想是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>

來源

2012-03-28 Stefan

我的理解是，在您onDragStart方法（S），你需要設置一些數據爲事件...

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

來源

2012-03-28 21:14:30

謝謝，這爲FireFox做了訣竅:)。然而，IE 9.0仍然失敗....你有另一個想法，讓IE瀏覽器工作？ – Stefan 2012-03-29 09:55:39

以及這使得它在IE 10預覽版中工作。 IE 9似乎不支持它.... Wourld很好，如果你或其他人可以驗證.. – Stefan 2012-03-29 12:03:12

IE 10平臺預覽模式也可以。 – Stefan 2012-03-29 19:06:09

To m ake dropEvent在firefox中的工作，您還應該添加任何窗口小部件

event.preventDefault()

在onDrop方法的DropHandler中。

來源

2013-01-21 10:40:48

HTML5拖放只能在Google Chrome中工作

回答

相關問題