Javascript HTML5拖放，Firefox中未触发“拖放”事件

尽管仔细阅读了Mozilla开发者网络文档，以及我在Stack Overflow上找到的任何答案，但我仍然无法在Firefox中使用HTML5拖放功能。我正在AngularJS应用程序中使用这个。在Chrome和InternetExplorer中一切正常，但在FirefoxV33.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();

---

您还可以使用dragg和drop 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>

---

参考资料：

您也可以使用dragg和drop 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>

---

参考资料：

好吧，罪魁祸首似乎是handleDragStart函数中的effectAllowed和dropEffect设置。我不知道为什么这些设置会禁用Firefox中的drop事件。由于我在Chrome中使用这些线条主要是为了它们的视觉效果，光标将根据使用的效果而改变，在我的例子中，删除这些线条解决了我的问题

---

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

那么，罪魁祸首似乎是handleDragStart函数中的effectAllowed和dropEffect设置。我不知道为什么这些设置会禁用Firefox中的drop事件。由于我在Chrome中使用这些线条主要是为了它们的视觉效果，光标将根据使用的效果而改变，在我的例子中，删除这些线条解决了我的问题

---

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

对我来说，只有在dragstart事件处理程序中添加以下代码后，drop事件才起作用

---

e、 dataTransfer.setDatatext，somedata

对我来说，只有在dragstart事件处理程序中添加以下代码后，它才起作用

---

e、 dataTransfer.setDatatext，somedata

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

运行下面的代码片段，查看它的运行情况

函数dragStartevt{ console.logdragStart； evt.dataTransfer.setDatatext，mydata；//Firefox需要 }; //函数dragEnterevt{ //预防违约； //}; 函数dragOverevt，isDestination{ console.logdragOver； 如果是目的地{ evt.dataTransfer.dropEffect=复制； } 否则{ evt.dataTransfer.dropEffect=移动； } 预防违约； }; //函数dragleavevt{ //预防违约； //}; 函数dropevt{ 控制台.logdrop； var html=document.getElementByIdsourceNode.innerHTML； document.getElementByIdtargetNode.innerHTML=html； 预防违约； }; 把这个拖到盒子里

---

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

运行下面的代码片段，查看它的运行情况

函数dragStartevt{ console.logdragStart； evt.dataTransfer.setDatatext，mydata；//Firefox需要 }; //函数dragEnterevt{ //预防违约； //}; 函数dragOverevt，isDestination{ console.logdragOver； 如果是目的地{ evt.dataTransfer.dropEffect=复制； } 否则{ evt.dataTransfer.dropEffect=移动； } 预防违约； }; //函数dragleavevt{ //预防违约； //}; 函数dropevt{ 控制台.logdrop； var html=document.getElementByIdsourceNode.innerHTML； document.getElementByIdtargetNode.innerHTML=html； 预防违约； }; 把这个拖到盒子里

---

谢谢saqib，但我不想向应用程序添加Angular以外的任何新库。谢谢saqib，但我不想向应用程序添加Angular以外的任何新库。