HTML 5 - Drag n Drop - 如果放置目標被完全占用，則不會觸發 ondragover 事件

Question

我有一個帶有左窗格和右窗格的容器。 您可以從左窗格拖動，然后放在右窗格中。 出於某種原因，如果放置目標已完全被占用，則不會觸發 html 5 ondragover 事件。 我的放置目標是一個 div，當 ondrop 事件發生時，我會在其中動態創建 iframe。 當我第一次從左側拖動某些東西並將其放到左側時，我能夠創建第一個 iframe。 但是現在第二次，如果我從左邊拖動一些東西並嘗試將它放到右邊，ondragover 不會被觸發（我放置斷點，它沒有被擊中），因為放置目標已經滿了我的第一個 iframe . 在 ondragover 偵聽器中，我想將現有 iframe 的高度降低一半，以便為創建新的 iframe 騰出空間。 但不幸的是，ondragover 並沒有被觸發。 有什么方法可以修改 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");
}

Answer 1

也許只是一個語法問題，HTML5 中的事件是dragover (no on )

更多 html5 拖放信息在這里：

• 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/拖動