Предотвращение дефолта с помощью событий перетаскивания в Meteor

Я пытаюсь реализовать базовые функции перетаскивания в приложение 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. Я что-то упускаю? Кто-нибудь реализовал это успешно?

Ответы

Ответ 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).

Ответ 2

Обновляя [email protected], вам также необходимо вызвать метод 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);
}