Javascript HTML5 drop事件具有不同的e.target范围

我正在尝试使用以下模式创建一个HTML5拖放实现

<table>
  <tr draggable=true>
    <td>hello world 1</td>
  </tr>
  <tr draggable=true>
    <td>hello world 2</td>
  </tr>
</table>


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);
  }
}

事实上，在上面的示例中，this和e.target将是完全不同的dom对象，其中“this”将是可拖动对象（tr），e.target将是td元素

---

有没有一种合理的方法来构造这个类来解决这个问题？

看起来您所面临的问题是，e.target总是作为被丢弃的最内部元素出现，而不是事件附加到的元素（

el

）

（对我来说）最合乎逻辑的方法是每个元素只有一个reordstories实例。你可以这样做：

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

---

在这种情况下，在所有事件中，

this

将引用

ReorderStories

的实例，

this.el

将引用您将事件附加到的元素。

不确定您想要什么，但

e.target

是冒泡传播的对象。看，尤其是

event.currentTarget

。嗨@katspaugh，我很感激e.target会冒泡。e、 在这种情况下，currentTarget将实际给出与e.target相同的结果。我的观点是，事件对象似乎永远不会暴露您所期望的可拖动目标。

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