可拖动在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