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

在Firefox中，Draggable失败了

1 个答案: