Despite reading the Mozilla Developer Network docs carefully, and any answers I could find on Stack Overflow, still I cannot get HTML5 drag and drop working in Firefox. I am using this in an AngularJS app. Everything works fine in Chrome and Internet Explorer, but not in Firefox (v33.1). I would rather not have to resort to using jQueryUI.

Hopefully someone can spot something here that I am missing. As you can see in the code below, I have added some console.log() calls to each event handler to check to make sure each event is firing as expected. In Firefox, all of the events fire except for the "drop" event.

Here is a simplified version of my code:

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();

Despite reading the Mozilla Developer Network docs carefully, and any answers I could find on Stack Overflow, still I cannot get HTML5 drag and drop working in Firefox. I am using this in an AngularJS app. Everything works fine in Chrome and Internet Explorer, but not in Firefox (v33.1). I would rather not have to resort to using jQueryUI.

Hopefully someone can spot something here that I am missing. As you can see in the code below, I have added some console.log() calls to each event handler to check to make sure each event is firing as expected. In Firefox, all of the events fire except for the "drop" event.

Here is a simplified version of my code:

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();

• javascript
• angularjs
• html
• firefox

4 Answers 4

Well, it appears that the culprit was the setting of the effectAllowed and dropEffect in the handleDragStart() function. I am not sure why the setting of those disables the drop event in Firefox. Since I was using those primarily for their visual effect (in Chrome the cursor will change based on what effect is being used), in my case, removing those lines solved the problem for me.

EDIT: Actually, it appears that in Firefox, if you decide to set the the effectAllowed and dropEffect in the dragstart event handler, you need to also set the dropEffect in the dragenter and dragover event handlers. Failing to do so will prevent the drop event from firing.

for me it worked only after adding below code inside dragstart event handler e.dataTransfer.setData("text", "somedata");

you can also use for dragg and drop aculo script. it will provide you many features . I have applied in my website.

<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>

Reference: http://madrobby.github.io/scriptaculous/draggable/

Unlike most other browsers, Firefox seems to require the e.dataTransfer.setData() method to be called in the dragstart event handler.

Run my code snippet, below, to see it in action.

  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>