title: HTML5 drop event has a different e.target to scope
body: <p>I'm trying to create an HTML5 drag and drop implementation using the following pattern.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr draggable=true&gt;
      &lt;td&gt;hello world 1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr draggable=true&gt;
      &lt;td&gt;hello world 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  var ReorderStories = function() {
  };
  
  ReorderStories.prototype = {
  
    addEvents : function(el) {
      el.addEventListener('dragenter', this, false);
      el.addEventListener('dragover', this, false);
      el.addEventListener('dragleave', this, false);
      el.addEventListener('drop', this, false);
      el.addEventListener('dragend', this, false);
  
      return el;
    },
  
    handleEvent : function(e) {
  
      switch(e.type) {
        case "dragstart": this.handleDragStart(e); break;
        case "dragenter": this.handleDragEnter(e); break;
        case "dragover": this.handleDragOver(e); break;
        case "dragleave": this.handleDragLeave(e); break;
        case "drop": this.handleDrop(e); break;
        case "dragend": this.handleDragEnd(e); break;
      }
    },
  
    handleDrop : function(e) {
      console.log(this, e.target);
    }
  }
  </code></pre>
  
  <p>Using this pattern I can maintain the scope of the class in the drop handler which is great because I can reference all the other properties and functions of that class. However, it turns out that e.target does not expose the same dom object as "this" would in the following example:</p>
  
  <pre><code>el.addEventListener('drop', function(){ 
    console.log(this, e.target)
  }, false);
  </code></pre>
  
  <p>In fact in the above example this and e.target would be different dom objects altogether, where "this" would be the draggable object (tr) and e.target would be the td element.</p>
  
  <p>Is there a sensible way to structure this class to get around this problem?</p>