通过 Meteor 中的拖动事件防止默认答案

【问题标题】：preventing default with drag events in Meteor通过 Meteor 中的拖动事件防止默认
【发布时间】：2016-09-24 09:49:57
【问题描述】：

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

【问题讨论】：

标签： javascript meteor

【解决方案1】：

嗯，这很愚蠢。我想我想通了。除了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 中）。

【讨论】：

【解决方案2】：

更新到meteor@1.4.1，你还需要调用dataTransfer.getData()方法来获取丢弃的文件数据（如果你使用drag n' drop来上传文件）

'drop #features' : function(e, t) {
    e.preventDefault();
    console.log('drop!');

    e.originalEvent.dataTransfer.getData("text");
    //without the previous line you won't be able to get dropped file data;
    console.log('File name: ' + e.originalEvent.dataTransfer.files[0].name);
}

【讨论】：

你节省了我很多时间。谢谢！