HTML5ドロップイベントはスコープとは異なるe.targetを持っています

Question

次のパターンを使用してHTML5ドラッグアンドドロップの実装を作成しようとしています。

このパターンを使用すると、ドロップハンドラのクラスのスコープを維持できます。これは、そのクラスの他のすべてのプロパティと関数を参照できるためです。実際に

el.addEventListener('drop', function(){ 
    console.log(this, e.target) 
}, false); 

上記の例では、これとe.targetは全く異なるDOMオブジェクトのようになります。「これは」次の例では同じようしかし、それはe.targetが同じDOMオブジェクトを公開しないことが判明しますここで、 "this"はドラッグ可能なオブジェクト（tr）で、e.targetはtd要素になります。

この問題を回避するには、このクラスを構造化する賢明な方法がありますか？

Answer 1

あなたが直面している問題は、イベントが添付された要素（el）ではなく、ドロップされている最も内側の要素としてe.targetが常に出てくることです。

最も論理的なアプローチは、要素ごとにReorderStoriesのインスタンスを1つだけ持つことです。この場合

var ReorderStories = function(el) { 
    this.el = el; 
    this.addEvents(el); 
}; 

、あなたが添付イベント要素を参照することになり、すべてのイベントに、thisはReorderStoriesとthis.elのインスタンスを参照します：あなたはこのような何かを行うことができます。