私は新しいHtml5ドラッグアンドドロップfunctionalltyを試しています。実装はかなり簡単だったとUiBinderサンプルメッセージはatutomaticallyHTML5 Google Chromeでドラッグ&ドロップのみ
- 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>
ありがとうございました、それはFireFoxのトリックでした:)。しかし、IE 9.0はまだ失敗します....あなたは別のアイデアを持っている、IEの作業を取得するには? – Stefan
これはIE 10プレビュー版で動作します。 IE 9はそれをサポートしていないようです.... あなたや他の誰かがそれを確認できるなら、Wourldは素敵です。 – Stefan
IE 10プラットフォームプレビューモードも機能します。 – Stefan