Событие отбрасывания HTML5 имеет другую цель e.target

Question

Я пытаюсь создать реализацию перетаскивания 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);
  }
}

Используя этот шаблон, я могу поддерживать область действия класса в обработчике перетаскивания, и это здорово, потому что я могуссылаться на все другие свойства и функции этого класса.Однако оказывается, что e.target не предоставляет тот же объект dom, что и «this» в следующем примере:

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

Фактически в приведенном выше примере this и e.target будут отличаться от domобъекты в целом, где «this» будет перетаскиваемым объектом (tr), а e.target будет элементом td.

Есть ли разумный способ структурировать этот класс, чтобы обойти эту проблему?

Answer 1

Похоже, проблема, с которой вы сталкиваетесь, заключается в том, что e.target всегда выступает в качестве самого внутреннего элемента, на который добавляется объект, а не элемента, к которому было прикреплено событие (el).

Самым логичным подходом (для меня) было бы иметь ровно один экземпляр ReorderStories на элемент.Вы можете сделать что-то вроде этого:

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

В этом случае на всех ваших событиях this будет ссылаться на экземпляр ReorderStories, а this.el будет ссылаться на элемент, к которому вы прикрепили событиек.