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事件，如果放置目標完全被佔用，則不會觸發

回答

相關問題