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（没有on）

更多html5拖放信息：

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

1 个答案: