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事件。 沒什么意義，但是那個shoudl工作：

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

就像Patrick Evans在評論中注意到的那樣，你必須在拖放區域設置drop事件監聽器，而不是拖動元素本身。 也可以是document ：

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

以下是彼得·保羅·科赫（Peter Paul Koch）關於所有這些廢話的文章（警告：提前做好准備）。

Answer 2

嘗試這個

dragging.addEventListenter('drop', function() {
    dragging.innerHTML=' Dropped '
}, false);

代替

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

addEventListener第二個參數是一個函數。 第三個參數確定是否在冒泡期間捕獲事件

並且，假設在顯示圖像的同一div上發生丟棄操作

Answer 3

嘗試按照這個w3schools拖放

#mickjguy