Question

我正在尝试在我的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对此进行了测试。我错过了什么吗？有没有人成功实现过这个？

Answer 1

嗯，那太傻了。我想我明白了。除preventDefault()事件外，您还需要在dragover事件上致电drop。这是我的工作代码：

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中）。

Answer 2

更新到meteor@1.4.1，您还需要调用dataTransfer.getData（）方法以获取已删除的文件数据（如果您使用拖动＆＃39;删除上传文件）

<PyPDF2.pdf.PdfFileWriter object at 0x7f0e801ea090>

在Meteor中阻止拖拽事件的默认值

2 个答案: