在流星拖拽事件中防止默认

时间：2023-01-03 19:39:32

I'm attempting to implement basic drag and drop functionality into my Meteor application. I want the user to be able to drop a file (from their file system) into a specified dom element, and retrieve that file in the dataTransfer object. Unfortunately, I can't seem to prevent the event from reloading the entire page on the drop event. Here's my basic event handler:

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

Template.sideBar.events({

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

   e.preventDefault();

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

   return false; 
 }

});

I've tested this with Chrome and Firefox. Am I missing something? Has anyone implemented this successfully?

我已经用Chrome和Firefox测试过了。我遗漏了什么东西?有人成功地实现了吗?

2 个解决方案

#1

Well, that was silly. I think I figured it out. You need to call preventDefault() on the dragover event in addition to the drop event. Here's my working code:

嗯,那是愚蠢的。我想我算出来了。除了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!');
  }

});

Not sure why this works, but it does (at least in Chrome).

不知道为什么会这样，但确实如此(至少在Chrome上)。

#2

Updating to meteor@1.4.1, you also need to invoke dataTransfer.getData() method in order to fetch dropped file data (if you're using drag n' drop to upload files)

更新到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);
}

#1