我正在尝试实现一个类似于gmail的文件上传系统,我已经完成了Fileupload / AJAX的所有问题,它工作得很完美。我唯一的问题是用户反馈。
例如..在gmail中,当你把一个文件拖到你的浏览器上(假设是IE9+用户),会弹出一个区域,让你把文件放进去。我认为它是某种由框架(比如说Jquery)捕获的JavaScript事件,它允许我在拖放区域制作一些很酷的动画。
我的问题很简单..要执行此操作,我应该捕获什么事件?有什么想法吗?我做错了吗?
发布于 2012-01-31 00:31:38
主要事件就是drop。
您还需要处理dragenter和dragleave,否则删除操作只会导致加载已删除的文件。你也可以选择观看dragover。
我有一些注册这些处理程序的代码,如下所示:
var $dz = $('#dropzone');
$dz.on({
dragenter: dragenter,
dragleave: dragleave,
dragover: false,
drop: drop
});
function dragenter() {
$dz.addClass('active');
};
function dragleave() {
$dz.removeClass('active');
};
function drop(e) {
var dt = e.originalEvent.dataTransfer;
if (dt) {
var files = dt.files;
...
}
$dz.removeClass('active');
};在这种情况下,dragenter和dragleave处理程序只是为了在将内容拖入拖放区域时更改拖放区域的外观。
发布于 2012-01-31 00:32:23
它名为drop,事件对象中所需的属性将位于originalEvent属性中。
$(element).on("drop",function(e){
console.log(e.originalEvent)
});如果我没记错的话,您还需要解除dragenter的绑定并在相同的元素上拖动event,这样它才能触发drop事件。
$(element).on("dragenter dragleave", false);https://stackoverflow.com/questions/9067184
复制相似问题