HTML5拖放，“ drop”事件在Firefox中不触发

Question

尽管仔细阅读了Mozilla开发人员网络文档，以及可以在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中的drop事件。 由于我主要是为了视觉效果而使用它们（在Chrome中，光标会根据所使用的效果而变化），因此，删除这些行为我解决了这个问题。

编辑：实际上，似乎在Firefox中，如果您决定在dragstart事件处理程序中设置effectAllowed和dropEffect ，则还需要在dragenter和dragover事件处理程序中设置dropEffect 。 否则，将阻止触发drop事件。

Answer 2

对我来说，只有在dragstart事件处理程序e.dataTransfer.setData（“ text”，“ somedata”）中添加以下代码后，它才起作用

Answer 3

您还可以用于拖放aculo脚本。 它会为您提供许多功能。 我已经在我的网站上申请了。

<div id="drag_demo_2" style="width:100px; height:100px; background:#fff85d; border:1px solid #333;"></div>
  <script type="text/javascript">
    new Draggable('drag_demo_2', { revert: true, snap: [40, 40] });
  </script>

参考： http : //madrobby.github.io/scriptaculous/draggable/

Answer 4

与大多数其他浏览器不同，Firefox似乎要求在dragstart事件处理程序中调用e.dataTransfer.setData（）方法。

运行下面的代码片段，以查看其运行情况。

  function dragStart(evt) { console.log("dragStart()"); evt.dataTransfer.setData("text", "mydata"); // Needed by Firefox }; //function dragEnter(evt) { // evt.preventDefault(); //}; function dragOver(evt, isDestination) { console.log("dragOver()"); if (isDestination) { evt.dataTransfer.dropEffect = "copy"; } else { evt.dataTransfer.dropEffect = "move"; } evt.preventDefault(); }; //function dragLeave(evt) { // evt.preventDefault(); //}; function drop(evt) { console.log("drop()"); var html = document.getElementById("sourceNode").innerHTML; document.getElementById("targetNode").innerHTML = html; evt.preventDefault(); }; 

 <div id="sourceNode" draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event, false)" style="cursor:move" >drag this into box</div> <div id="targetNode" ondragover="dragOver(event, true)" ondrop="drop(event)" style="width:100px;height:100px;border:1px dashed black;" >&nbsp;</div>