javascript - HTML5 拖放， "drop"事件未在 Firefox 中触发

Question

尽管仔细阅读了 Mozilla Developer Network 文档，并在 Stack Overflow 上找到了任何答案，但我仍然无法在 Firefox 中使用 HTML5 拖放操作。我在 AngularJS 应用程序中使用它。在 Chrome 和 Internet Explorer 中一切正常，但在 Firefox (v33.1) 中却不行。我宁愿不必诉诸于使用 jQueryUI。

希望有人能在这里发现我遗漏的东西。正如您在下面的代码中看到的那样，我向每个事件处理程序添加了一些 console.log() 调用以检查以确保每个事件都按预期触发。在 Firefox 中，除了“drop”事件之外的所有事件都会触发。

这是我的代码的简化版本:

var assignEvents = function() {
  var rows = angular.element('.row');
  if (self.rows.length > 0) {
    // event handlers for rows
    angular.forEach(self.rows, function(row, key) {
      angular.element(row)
      // clear any existing bindings
      .off('dragstart')
      .off('dragenter')
      .off('dragover')
      .off('dragleave')
      .off('drop')
      .off('dragend')
      // add bindings
      .on('dragstart', handleDragStart)
      .on('dragenter', handleDragEnter)
      .on('dragover', handleDragOver)
      .on('dragleave', handleDragLeave)
      .on('drop', handleDrop)
      .on('dragend', handleDragEnd);
    });
  }
};

// event handlers

var handleDragStart = function(e) {
  console.log("dragStart");
  e.stopPropagation();
  this.style.opacity = 0.4;
  e.originalEvent.dataTransfer.setData('text/plain', this.id);
  e.originalEvent.dataTransfer.effectAllowed = 'link';
  e.originalEvent.dataTransfer.dropEffect = 'link';
};

var handleDragEnter = function(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log("dragEnter");
  return false;
};

var handleDragOver = function(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log("dragOver");
  return false;
};

var handleDragLeave = function(e) {
 e.preventDefault();
 e.stopPropagation();
 console.log("dragLeave");
 return false;
};

var handleDrop = function(e) {
  console.log("drop");
};

var handleDragEnd = function(e) {
  console.log("dragEnd");
  e.stopPropagation();
  e.preventDefault();
  this.style.opacity = 1;
};

assignEvents();

Answer 1

看来罪魁祸首是 handleDragStart() 函数中 effectAllowed 和 dropEffect 的设置。我不确定为什么这些设置会禁用 Firefox 中的放置事件。因为我主要是为了它们的视觉效果而使用它们(在 Chrome 中，光标会根据使用的效果而改变)，在我的例子中，删除这些线解决了我的问题。

编辑:实际上，在 Firefox 中，如果您决定在 dragstart 事件处理程序中设置 effectAllowed 和 dropEffect，您还需要在 dragenter 和 dragover 事件处理程序中设置 dropEffect。如果不这样做，将阻止触发 drop 事件。