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

我有一个左窗格和右窗格的容器。您可以从左侧窗格中拖动，然后拖放到右侧窗格中。出于某种原因，如果放置目标已被完全占用，则不会触发html 5 ondragover事件。我的放置目标是一个div，当发生ondrop事件时，我会动态创建iframe。我可以创建第一个iframe，当我从左侧第一次拖动东西并将其放到左侧时。但现在第二次，如果我从左侧拖动一些东西并尝试将它放到右侧，ondragover不会被触发（我放置了断点，它没有被击中），因为放置目标已经充满了我的第一个iframe 。在ondragover监听器中，我想将现有iframe的高度降低到一半，以便为创建新的iframe腾出空间。但不幸的是，ondragover只是没有被触发。有什么办法可以修改ondragover的行为，即使放置目标完全被占用，它也会被触发吗？任何帮助将不胜感激。所以，这里是代码..HTML 5 - 拖放n Drop - ondragover事件，如果放置目标完全被占用，则不会触发

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

来源

2012-07-16 Tejas

也许只是一个语法问题，HTML5事件是在这里dragover（无on）

更多HTML5拖放ñ下降信息：

来源

2012-07-16 15:31:45 MikeM

不，它不是一个语法问题。我正在使用w3schools文档进行参考。 – Tejas 2012-07-16 18:17:47

@Tejas你真的应该阅读这个网站http://w3fools.com/，为什么你不应该使用w3schools.com。 – 2012-09-12 21:21:36

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

回答

相关问题