javascript - Draggable が Firefox で惨めに失敗する

Question

JSFiddle

この単純な例では、赤いボックスを破線の領域にドラッグできるはずです。IE と Chrome では動作しますが、Firefox では動作しません。本当に奇妙なのは、dragstartイベントが発生する (要素が非表示になる) にもかかわらず、他に何も起こらないことですdragend。

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

このコードが最も効率的ではないことはわかっています (一度だけ使用する必要がある場合の使いすぎ、/getElementByIdのコールバックをコピーして貼り付ける) が、要点はわかります。dragenterdragover

私は何か間違ったことをしていますか？