そこで、非常に単純なドラッグ アンド ドロップ ファイル アップロード ウィジェットを実装しました。基本的に、私のウィジェットは、いくつかのラベルと内部にボタンがある垂直パネルです。ユーザーは、ファイルを垂直パネルにドラッグするか、ボタンをクリックしてファイルを参照できます。
私の問題は、ファイルを垂直パネルにドラッグすると、ラベルまたはボタンが占めるスペースにアイテムをドラッグするたびに DragLeaveEvent が発生することです。ラベルやボタンの上にある場合でも、アイテムが垂直パネルにあることを知りたいです。シンプルなものが欠けていると確信しています。これらの dom ハンドラーを垂直パネルに追加して、ドラッグ機能を提供します。
addDomHandler(new DragEnterHandler() {
@Override
public void onDragEnter(DragEnterEvent event) {
System.out.println("drag enter");
highlight(true);
}
}, DragEnterEvent.getType());
addDomHandler(new DragLeaveHandler() {
@Override
public void onDragLeave(DragLeaveEvent event) {
System.out.println("drag leave");
highlight(false);
}
}, DragLeaveEvent.getType());
addDomHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
}
}, DragOverEvent.getType());
addDomHandler(new DropHandler() {
@Override
public void onDrop(DropEvent event) {
System.out.println("drop");
// stop default behaviour
event.preventDefault();
event.stopPropagation();
// starts the fetching, reading and callbacks
if (fileUploadHandler != null) {
handleFiles(event.getDataTransfer(), fileUploadHandler);
}
highlight(false);
}
}, DropEvent.getType());