HTML5拖放，＆QUOT;下降＆QUOT;事件在Firefox不触发 [英] HTML5 drag and drop, "drop" event not firing in Firefox

问题描述

尽管仔细阅读Mozilla开发者网络的文档，我能找到的堆栈溢出的任何答案，我仍然不能得到HTML5拖放在Firefox中工作。我在AngularJS应用程序中使用此。一切都在Chrome和Internet Explorer工作正常，但不能在Firefox（v33.1）。我宁可不要诉诸使用jQueryUI的。

希望有人可以在这里发现的东西，我很想念。正如你可以在下面的code看到的，我增加了一些的console.log（）调用每个事件处理程序进行检查，以确保每个事件被触发预期。在Firefox中，所有事件的触发除了滴的事件。

下面是我的code的简化版本：

  VAR assignEvents =功能（）{
  VAR行= angular.element（'行'）;
  如果（self.rows.length大于0）{
    //事件处理程序的行
    angular.forEach（self.rows，功能（行，​​键）{
      angular.element（行）
      //清除任何现有的绑定
      .off（'的dragstart'）
      .off（'的dragenter'）
      .off（'的dragover'）
      .off（'dragleave'）
      .off（'降'）
      .off（'dragend'）
      //添加绑定
      。对（'的dragstart'，handleDragStart）
      。对（'的dragenter'，handleDragEnter）
      。对（'的dragover'，handleDragOver）
      。对（'dragleave'，handleDragLeave）
      。对（'降'，handleDrop）
      。对（'dragend'，handleDragEnd）;
    }）;
  }
};//事件处理程序VAR handleDragStart =功能（E）{
  的console.log（的dragstart）;
  e.stopPropagation（）;
  将this.style.opacity = 0.4;
  e.originalEvent.dataTransfer.setData（'text / plain的，this.id）;
  e.originalEvent.dataTransfer.effectAllowed ='链接';
  e.originalEvent.dataTransfer.dropEffect ='链接';
};VAR handleDragEnter =功能（E）{
  亦即preventDefault（）;
  e.stopPropagation（）;
  的console.log（dragEnter事件）;
  返回false;
};VAR handleDragOver =功能（E）{
  亦即preventDefault（）;
  e.stopPropagation（）;
  的console.log（的dragover）;
  返回false;
};VAR handleDragLeave =功能（E）{
 亦即preventDefault（）;
 e.stopPropagation（）;
 的console.log（dragLeave）;
 返回false;
};VAR handleDrop =功能（E）{
  的console.log（水滴）;
};VAR handleDragEnd =功能（E）{
  的console.log（dragEnd）;
  e.stopPropagation（）;
  亦即preventDefault（）;
  将this.style.opacity = 1;
};assignEvents（）;
 

解决方案

哦，看来，罪魁祸首是设置了 effectAllowed 和 DROPEFFECT 在 handleDragStart（）功能。我不知道为什么这些的设置禁用Firefox中的drop事件。由于我使用的主要是他们的视觉效果（在Chrome光标将改变基于正在使用什么样的影响），在我的情况，删除这些行解决了这个问题对我来说。

编辑：其实，它出现在Firefox中，如果你决定要设置了 effectAllowed 和 DROPEFFECT 中在的dragstart 事件处理程序，您还需要设置 DROPEFFECT 在的dragenter 和的dragover 事件处理程序。如果不这样做将prevent的降从射击的事件。

Despite reading the Mozilla Developer Network docs carefully, and any answers I could find on Stack Overflow, still I cannot get HTML5 drag and drop working in Firefox. I am using this in an AngularJS app. Everything works fine in Chrome and Internet Explorer, but not in Firefox (v33.1). I would rather not have to resort to using jQueryUI.

Hopefully someone can spot something here that I am missing. As you can see in the code below, I have added some console.log() calls to each event handler to check to make sure each event is firing as expected. In Firefox, all of the events fire except for the "drop" event.

Here is a simplified version of my code:

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

解决方案

Well, it appears that the culprit was the setting of the effectAllowed and dropEffect in the handleDragStart() function. I am not sure why the setting of those disables the drop event in Firefox. Since I was using those primarily for their visual effect (in Chrome the cursor will change based on what effect is being used), in my case, removing those lines solved the problem for me.

EDIT: Actually, it appears that in Firefox, if you decide to set the the effectAllowed and dropEffect in the dragstart event handler, you need to also set the dropEffect in the dragenter and dragover event handlers. Failing to do so will prevent the drop event from firing.

这篇关于HTML5拖放，＆QUOT;下降＆QUOT;事件在Firefox不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！