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 когда я должен просто использовать его один раз, копирование вставленного обратного вызова для dragenter/dragover), но он получает через точку.

Я что-то не так?

Answer 1

ОБНОВЛЕНО

В соответствии с этой статьей here, я считаю, что проблема была эта линия

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

прекрасно работает в этом JSFiddle