10

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 でこれをテストしました。何か不足していますか？誰かがこれをうまく実装しましたか?

4

2 に答える 2

17

まあ、それはばかげていました。私はそれを理解したと思います。イベントに加えて、イベントpreventDefault()を呼び出す必要があります。ここに私の作業コードがあります:dragoverdrop

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 では)。

于 2013-01-25T03:02:31.763 に答える
1

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);
}
于 2016-09-24T01:49:57.823 に答える