在Meteor中使用拖动事件防止默认操作

Question

我正在尝试将基本的拖放功能实现到我的Meteor应用程序中。我希望用户能够将文件（从他们的文件系统）拖放到指定的dom元素中，并在dataTransfer对象中检索该文件。不幸的是，我似乎无法防止事件在拖放事件上重新加载整个页面。这是我的基本事件处理程序：

Template.sideBar.events({

 'drop #features' : function(e, t) {

   e.preventDefault();

   var fileList = e.dataTransfer.files;
   console.log(fileList[0]); 

   return false; 
 }

});

我已经在Chrome和Firefox上进行了测试。我是否漏掉了什么？有人成功地实施了吗？

- bento

Answer 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中是有效的。

- bento

Answer 2

更新到meteor@1.4.1版本，如果您使用拖放上传文件功能，还需要调用dataTransfer.getData()方法来获取拖放文件的数据。

'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);
}

- thiagoribeiro015

---

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