ondragenter提醒容器的.id

Question

I've an img that I just wanna drop in the div called #div1 . When I drag over the div I would like to get the container's id, but this is making lots of alerts, no just one....

 <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);
}

So Why I'm recibing lots of Alerts???

See the Demo there : http://jsfiddle.net/PbjJv/

Answer 1

Explanation

The ondragover event is fired every pixel your cursor moved on the div . Try to use ondragleave event which is fired when you release the mouse button.

---

Solution

Use the ondragleave event on your div :

HTML

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

JSFiddle

Answer 2

This accepted answer is incorrect.

From the MDN:

The drop event is fired when an element or text selection is dropped on a valid drop target.

And:

The dragleave event is fired when a dragged element or text selection leaves a valid drop target.

Calling allowDrop() when the ondragleave event fires would allow dropping to the DIV after the drag has left that element. The element in question would not receive the final ondrop event when the user relase the mouse button.

The question seem to have been edited, it seems fine to me at this point. The jsfiddle referenced in the OPs question suggests this as it use ondragover instead of ondragenter on div1 .