我正在尝试新的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>
谢谢,这为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