Draggable failing miserably in Firefox

Question

JSFiddle

In this simple example, you should be able to drag the red box into the dashed area. It works in IE and in Chrome, but not in Firefox. What's really weird is that the dragstart event fires (causing the element to be hidden), and yet nothing else happens - not even the dragend (leaving it hidden and thereafter unusable).

var source = null;
document.getElementById('drag').addEventListener("dragstart",function(e) {
  source = this;
  e.dataTransfer.clearData();
  e.dataTransfer.effectAllowed = "move";
  setTimeout(function() {source.style.visibility = "hidden";},1);
});
document.getElementById('drag').addEventListener("dragend",function(e) {
  this.style.visibility = "";
  source = null;
});
document.getElementById('drop').addEventListener("dragenter",function(e) {
  if( source) {
    if( e.preventDefault) e.preventDefault();
    return false;
  }
});
document.getElementById('drop').addEventListener("dragover",function(e) {
  if( source) {
    if( e.preventDefault) e.preventDefault();
    return false;
  }
});
document.getElementById('drop').addEventListener("drop",function(e) {
  if( source) {
    this.appendChild(source);
    source = null;
  }
});

I know this code isn't the most efficient (overuse of getElementById when I should just use it once, copy-pasted callback for dragenter/dragover), but it gets the point across.

Am I doing something wrong?

Answer 1

UPDATED

As per this article here, i believe the issue was this line

e.dataTransfer.setData('Text',''); //you need this so that your code will work on Firefox.

Working perfectly in this JSFiddle