左ペインと右ペインを持つコンテナがあります。左ペインからドラッグして、右ペインにドロップできます。何らかの理由で、ドロップ ターゲットがすでに完全に占有されている場合、html 5 ondragover イベントはトリガーされません。私のドロップ ターゲットは div であり、ondrop イベントが発生したときに動的に iframe を作成します。何かを最初に左からドラッグして左にドロップすると、最初の iframe を作成できます。しかし、2回目に何かを左からドラッグして右にドロップしようとすると、ドロップターゲットが最初のiframeですでにいっぱいになっているため、ondragoverがトリガーされません(ブレークポイントを配置しましたが、ヒットしません)。 . ondragover リスナーでは、既存の iframe の高さを半分に減らして、新しい iframe を作成する余地を作りたいと考えています。しかし、残念ながら ondragover はトリガーされていません。ドロップ ターゲットが完全に占有されている場合でも 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");
}