javascript - HTML5 drag and drop, "drop" event not firing in Firefox -

despite reading mozilla developer network docs carefully, , answers find on stack overflow, still cannot html5 drag , drop working in firefox. using in angularjs app. works fine in chrome , internet explorer, not in firefox (v33.1). rather not have resort using jqueryui.

hopefully can spot here missing. can see in code below, have added console.log() calls each event handler check make sure each event firing expected. in firefox, of events fire except "drop" event.

here simplified version of code:

var assignevents = function() {   var rows = angular.element('.row');   if (self.rows.length > 0) {     // event handlers rows     angular.foreach(self.rows, function(row, key) {       angular.element(row)       // clear 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, appears culprit setting of effectallowed , dropeffect in handledragstart() function. not sure why setting of disables drop event in firefox. since using visual effect (in chrome cursor change based on effect being used), in case, removing lines solved problem me.

edit: actually, appears in firefox, if decide set the effectallowed , dropeffect in dragstart event handler, need set dropeffect in dragenter , dragover event handlers. failing prevent drop event firing.