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

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中).