GWT拖放文件上传不起作用 [英] GWT Drag and Drop File Upload not working

问题描述

所以我实现了一个非常简单的拖放文件上传部件。基本上我的小部件是一个垂直面板，里面有几个标签和一个按钮。用户可以将文件拖动到垂直面板或单击按钮并浏览文件。

我的问题是，当我将文件拖入垂直面板时，每次将该项目拖动到标签或按钮占用的空间上时，都会触发DragLeaveEvent。我希望它知道该项目在垂直面板中，即使它位于标签或按钮的顶部。我确定我缺少一些简单的东西。我通过将这些dom处理程序添加到垂直面板来提供拖动功能：

  addDomHandler（new DragEnterHandler（）{
 @Override 
 public void onDragEnter（DragEnterEvent event）{
 System.out.println（drag enter）; 
 highlight（true）; 
} 
}， DragEnterEvent.getType（））; 
 $ b addDomHandler（new DragLeaveHandler（）{
 @Override 
 public void onDragLeave（DragLeaveEvent event）{
 System.out.println（drag leave）; 
 highlight（false）; 
} 
}，DragLeaveEvent.getType（））; 
 $ b addDomHandler（new DragOverHandler（）{
 @Override 
 public void onDragOver（DragOverEvent event）{
} 
}，DragOverEvent.getType（）） ; 
 $ b addDomHandler（new DropHandler（）{
 @Override 
 public void onDrop（DropEvent event）{
 System.out.println（drop）; 
 //停止默认行为
 event.preventDefault（）; 
 event.stopPropagation（）; 
 
 //开始读取，读取和回调
 if（ fileUploadHandler！= null）{
 handleFiles（event.getDataTransfer（），fileUploadHandler）; 
} 
 highlight（false）; 
} 
}，DropEvent.getType ））; 
  

解决方案

通过大量研究，我找到了唯一的解决方案我能找到。

  panel.addDomHandler（new DragEnterHandler（）{$ b $）在dragover处理程序中将highlight设置为true，而不是拖动输入。 b @Override 
 public void onDragEnter（DragEnterEvent event）{
} 
}，DragEnterEvent.getType（））; 
 
 panel.addDomHandler（new DragLeaveHandler（）{
 @Override 
 public void onDragLeave（DragLeaveEvent event）{
 highlight（false）; 
} 
}，DragLeaveEvent.getType（））; 
 
 panel.addDomHandler（new DragOverHandler（）{
 @Override 
 public void onDragOver（DragOverEvent event）{
 highlight（true）; 
} 
}，DragOverEvent.getType（））; 
 
 panel.addDomHandler（new DropHandler（）{
 @Override 
 public void onDrop（DropEvent event）{
 //停止默认行为
事件。 （）; 
 event.stopPropagation（）; 
 
 //开始读取，读取和回调
 handleFiles（event.getDataTransfer（））; 
 highlight（假）; 
} 
}，DropEvent.getType（））; 
  

So I have implemented a very simple drag and drop file upload widget. Basically my widget is a vertical panel with a couple of labels and a button inside. The user can either drag file into vertical panel or click button and browse for file.

My problem is that when I drag a file into the vertical panel it fires the DragLeaveEvent every time I drag the item over the space that the labels or button occupies. I want it to know that the item is in the vertical panel even when it is on top of the label or button. Im sure I am missing something simple. I provide the drag functionality by adding these dom handlers to the vertical panel:

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());    

解决方案

Through lots of research I have come to the only solution I could find. I set highlight to true in the dragover handler instead of drag enter.

    panel.addDomHandler(new DragEnterHandler() {
        @Override
        public void onDragEnter(DragEnterEvent event) {
        }
    }, DragEnterEvent.getType());

    panel.addDomHandler(new DragLeaveHandler() {
        @Override
        public void onDragLeave(DragLeaveEvent event) {
            highlight(false);
        }
    }, DragLeaveEvent.getType());

    panel.addDomHandler(new DragOverHandler() {
        @Override
        public void onDragOver(DragOverEvent event) {
            highlight(true);
        }
    }, DragOverEvent.getType());

    panel.addDomHandler(new DropHandler() {
        @Override
        public void onDrop(DropEvent event) {
            // stop default behaviour
            event.preventDefault();
            event.stopPropagation();

            // starts the fetching, reading and callbacks
            handleFiles(event.getDataTransfer());
            highlight(false);
        }
    }, DropEvent.getType());

这篇关于GWT拖放文件上传不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！