Javascript ondrop 没有做任何事情

Question

我无法弄清楚拖放，看了很多教程和问题，但当我放下笑脸时，仍然没有任何反应。我认为它会起作用，因为它适用于 ondragstart。

HTML:

<div id='dragging'></div>
<img draggable ='true' src ="http://img87.imageshack.us/img87/5673/rotatetrans.png" id="smiley"/>

JavaScript:

var smiley = document.getElementById('smiley');
var dragging = document.getElementById('dragging');
smiley.ondragstart = function(){
  dragging.innerHTML = 'You are dragging!';
};
smiley.ondrop = function(){
  dragging.innerHTML=' ';
};

我也尝试过这个: JavaScript:

smiley.addEventListenter('ondrop',dragging.innerHTML=' ');

Answer 1

您已经阅读了教程，但看起来不是正确的。

为了触发 drop 事件，您首先必须取消 dragover 和 dragenter事件。没什么意义，但这应该有效:

document.ondragover = function(e) {
    e.preventDefault();
};
document.ondragenter = function(e) {
    e.preventDefault();
};

就像 Patrick Evans 在评论中注意到的那样，您必须在放置区域而不是拖动的元素本身上设置 drop 事件监听器。也可能是文档:

document.ondrop = function(e) {
    dragging.innerHTML = ' ';
};

这是一个article by Peter Paul Koch关于所有这些废话(警告:前面咒骂)。