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>