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

使用这种模式我可以在drop处理程序中维护类的范围，因为我可以引用该类的所有其他属性和函数。但是，事实证明e.target不会在下面的示例中公开与“this”相同的dom对象：

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

实际上在上面的例子中，这和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会引用您附加事件的元素。

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

1 个答案: