我试图在我的Meteor应用程序中实现基本的拖放功能.我希望用户能够将文件(从他们的文件系统)放入指定的dom元素中,并在dataTransfer对象中检索该文件.不幸的是,我似乎不能阻止事件在drop事件上重新加载整个页面.这是我的基本事件处理程序：
Template.sideBar.events({
'drop #features' : function(e,t) {
e.preventDefault();
var fileList = e.dataTransfer.files;
console.log(fileList[0]);
return false;
}
});
我已经使用Chrome和Firefox进行了测试.我错过了什么吗？有没有人成功实现了？
解决方法
那是愚蠢的我想我想出来了除了drop事件之外,还需要在dragover事件上调用preventDefault().这是我的工作代码：
Template.sideBar.events({
'dragover #features' : function(e,t) {
e.preventDefault();
$(e.currentTarget).addClass('dragover');
},'dragleave #features' : function(e,t) {
$(e.currentTarget).removeClass('dragover');
},'drop #features' : function(e,t) {
e.preventDefault();
console.log('drop!');
}
});
不知道为什么这样做,但它确实(至少在Chrome中).