3

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），但它明白了这一点。

难道我做错了什么？

4

1 回答 1

3

更新

根据这里的这篇文章，我相信问题出在这条线上

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

在这个JSFiddle中完美工作

于 2013-07-06T20:33:07.900 回答