ドラッグ アンド ドロップを提供するウィジェットを使用します。私のUiBinderは次のようになります。
mainPanel = new FlowPanel();
dropPanel = new DropPanel();
dropLabel = new Label("Drop Image here!");
mainPanel.add(dropPanel);
mainPanel.add(dropLabel);
initWidget(mainPanel);
dropPanel は、次のイベントをサポートしています。
dropPanel.addDragEnterHandler(new DragEnterHandler() {
@Override
public void onDragEnter(DragEnterEvent event) {
event.stopPropagation();
event.preventDefault();
dropPanel.addStyleName(resources.css().active());
dropLabel.removeStyleName(resources.css().hide());
GWT.log("onDragEnter");
}
});
dropPanel.addDragLeaveHandler(new DragLeaveHandler() {
@Override
public void onDragLeave(DragLeaveEvent event) {
event.stopPropagation();
event.preventDefault();
dropPanel.removeStyleName(resources.css().active());
dropLabel.addStyleName(resources.css().hide());
GWT.log("onDragLeave");
}
});
これが私が使用するスタイルです:
.mainPanel {
position: relative;
}
.active {
border: 2pt solid green;
}
.dropLabel {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 50%;
text-align: center;
vertical-align: middle;
color: #ccc;
font-size: 20pt;
line-height: 14pt;
font-weight: bold;
background-color: yellow;
}
.hide {
display: none;
}
dropPanel をドラッグすると、ラベルが表示されます。dropPanel 内のラベルに何かをドラッグすると、それが発生DragLeaveEvent
します。
Label を基になる dropPanel にドラッグするときに、DragEvents を転送する方法はありますか?