Question

我有一个img，我只想放在名为#div1的div中。当我拖过div时，我想得到容器的id，但这会发出很多警报，不只是一个....

 <img id="drag1" 
      src="http://www.vectortemplates.com/raster/batman-logo-big.gif" 
      draggable="true" 
      ondragstart="drag(event, this)" 
      width="336" 
      height="69"/>

  <div id="div1"
       ondrop="drop(event)"  
       ondragenter="allowDrop(event, this)">
  </div>

JS：

function allowDrop(ev, obj)
{
    alert(obj.id);
}

那为什么我要重拍很多警报？

在那里看演示：http://jsfiddle.net/PbjJv/

Answer 1

说明

ondragover事件触发每个像素您的光标移动到div上。尝试使用释放鼠标按钮时触发的ondragleave事件。

解决方案

在div上使用ondragleave事件：

HTML

 <div id="div1"  ondragleave="allowDrop(event, this)"></div>

JSFiddle

Answer 2

这个接受的答案是不正确的。

来自MDN：

在有效放置目标上放置元素或文本选择时会触发放置事件。

和

当拖动的元素或文本选择留下有效的放置目标时会触发dragleave事件。

当ondragleave事件触发时，调用allowDrop（）将允许在拖动该元素后拖放到DIV。当用户重新关闭鼠标按钮时，有问题的元素将不会收到最终的ondrop事件。

这个问题好像已被编辑过，现在对我来说似乎很好。 OPs问题中引用的jsfiddle建议在 div1 时使用ondragover代替ondragenter。

ondragenter警告容器的.id

2 个答案:

说明

解决方案

HTML