HTML 5 - Drag n Drop - 如果放置目标被完全占用，则不会触发 ondragover 事件

Question

I have a container with left pane and right pane. You can drag from left pane, and drop on right pane. For some reason, the html 5 ondragover event is not triggered if the drop target is already completely occupied. My drop target is a div, and I would be dynamically creating iframes in it when ondrop event occurs. I am able to create the 1st iframe when I drag something for the first time from left and drop it to left. But now for the 2nd time if I drag something from the left and try to drop it to right, the ondragover is not getting triggered(I put the breakpoint, its not getting hit), because the drop target is already full with my 1st iframe. In the ondragover listener I would like to reduce the height of existing iframe to half, so as to make room for creation of new iframe. But unfortunately the ondragover is just not getting triggered. Is there any way I can modify the behaviour of ondragover, so that it gets triggered even if the drop target is completely occupied? Any help would be greatly appreciated. So, here is the code..

function onDragOver(ev) {
 ev.preventDefault();
 if(iframes_count > 4)
 {
   return;
 }
 if (iframes_count == 2)
 {
    if ((getDivLeftCoordinate() < ev.pageX < getDroppableWidth()) && (getDivTopCoordinate() < ev.pageY < getDroppableHeight()/2))
    {
        var existingFrames = document.getElementsByTagName("iframe");
        for (var i = 0; i < existingFrames.length; i++)
        {
          $(this).attr("height" , 500);
        }
    }
 }
 $("#right_pane").css("background-color", "grey");
}

function onDrop(ev) {
 ev.preventDefault();

var data_id = ev.dataTransfer.getData("Text");
var data_id_selector= "#" + data_id;
var content_id = data_id + "content";
var content_id_selector = "#" + content_id;
var url = $(data_id_selector).data("url");
var iframe_width = 100 + "%";
var iframe_height = 100 + "%";


$(data_id_selector).remove();
$("<iframe />", {
class: "myFrame",
id : content_id,

}).appendTo('#right_pane');



$(content_id_selector).attr("height", iframe_height);
$(content_id_selector).attr("width", iframe_width);
$(content_id_selector).attr("src", url);
$(content_id_selector).attr("background-color", "white");
$("#right_pane").css("background-color", "white");
}

Answer 1

perhaps just a syntax issue, the event in HTML5 is dragover (no on )

more html5 drag n drop info here:

• http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html
• http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html
• http://www.html5rocks.com/en/tutorials/dnd/basics/
• http://html5demos.com/drag