Question

尽管仔细阅读了Mozilla开发者网络文档，以及我在Stack Overflow上可以找到的任何答案，但我还是无法在Firefox中拖放HTML5。我在AngularJS应用程序中使用它。在Chrome和Internet Explorer中一切正常，但在Firefox（v33.1）中则不行。我宁愿不必使用jQueryUI。

希望有人能在这里找到我遗漏的东西。正如您在下面的代码中看到的，我已经向每个事件处理程序添加了一些console.log（）调用，以检查每个事件是否按预期触发。在Firefox中，所有事件都会触发，除了＆＃34; drop＆＃34;事件

以下是我的代码的简化版本：

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

好吧，罪魁祸首似乎是effectAllowed函数中dropEffect和handleDragStart()的设置。我不确定为什么设置这些会禁用Firefox中的drop事件。由于我主要使用那些视觉效果（在Chrome中，光标会根据使用的效果而改变），在我的情况下，删除这些线条为我解决了问题。

编辑：实际上，似乎在Firefox中，如果您决定在effectAllowed事件处理程序中设置dropEffect和dragstart，则还需要设置{{1 dropEffect和dragenter事件处理程序中的{}}。如果不这样做，将阻止dragover事件被触发。

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>

HTML5拖放，＆＃34; drop＆＃34;事件没有在Firefox中触发

4 个答案: