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:

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

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