Question

我想显示一个警告框，显示拖入#dropzone的图像源。

谁能看到我在这里做错了什么？

<img src="http://upload.wikimedia.org/wikipedia/en/5/53/Arsenal_FC.svg" alt="arsenal">
<div id="dropzone"></div>

<script>
var drop = document.getElementById(‘dropzone’);

drop.ondrop = function (event) {
   window.alert(event.dataTransfer.getData(‘Text’));
   return false;
};

drop.ondragover = function () { return false; };
drop.ondragenter = function () { return false; };
</script>

Answer 1

几点想法：

您似乎已从某些网站复制此代码，而不更正引号。 ‘dropzone’应为'dropzone'
没有内容的Div实际上是不可见的。你有高度和宽度的CSS样式吗？
要删除文件名，您应该使用event.dataTransfer.files[0].fileName

Answer 2

大多数网络浏览器都需要一个阻止对 dragenter 和 dragover 的默认操作才能捕获丢弃事件。

drop.ondragover = function (ev) { 
  ev.preventDefault();
  return false; 
};
drop.ondragenter = function (ev) { 
  ev.preventDefault();
  return false; 
};

在Firefox中使用拖放功能

2 个答案: