iframe内でのドラッグ＆ドロップの禁止が出来ない

Question

実現したいこと

iframe内にドラッグした際に、ドラッグ＆ドロップAPIでドロップ出来ないようにしたい

前提

・PHPでアップローダーを作っていまして、商品ごとに違うテーブルをiframe内に読み込んでいる
・ドラッグ＆ドロップAPIでWindow全体をドロップ禁止にしており、スクロールバーも含めてドラッグしても禁止マークが付いたマウスカーソルになっている
・ファイルを受け付ける領域のみ、ドラッグ＆ドロップAPIでドラッグとドロップを許可しているので、ここではコピーという文字のついたカーソルになっている
・iframeの領域にもドラッグ＆ドロップAPIでドロップ禁止を設定している

発生している問題

iframe内にドラッグしてみるとAPIが効かなくて、コピーのついたカーソルになりドロップするとダウロ－ドウィンドウが別タブで開いてしまう

該当のソースコード

iframe_test.html
CODE Pen iframe_test.html

electronics.html
CODE Pen electronics.html

試したこと

読み込まれる側のHTMLにスクリプトで禁止してみましたが効果はありませんでした。

補足情報（FW/ツールのバージョンなど）

Windows10 64Bit Chrome最新版
尚、デスクトップ上に2つのファイルを置いて試すとクロスオリジンのエラーが出るので、諸先輩方には釈迦に説法でしょうが、ローカルサーバー等に上げて検証してみて下さい。

諸先輩方のお知恵を拝借できれば幸いです。m(_ _)m

Answer 1

iframeで読み込まれるファイルにもドラッグアンドドロップ禁止設定をすればいのでは？

//parent.html

<script>
document.addEventListener('dragover',e=>{
  e.dataTransfer.dropEffect = "none";
});
</script>
parent
<iframe width="100" height="100" src="child.html"></iframe>

//child.html

<script>
document.addEventListener('dragover',e=>{
  e.dataTransfer.dropEffect = "none";
});
</script>
child

追記

メインページだけで制御したなら子windowのloadを待ってイベント制御する感じ

const nodragover=doc=>doc.addEventListener('dragover',e=>e.dataTransfer.dropEffect = "none");
window.addEventListener('DOMContentLoaded', ()=>{
  nodragover(document);
  document.querySelectorAll('iframe').forEach(x=>{
    x.addEventListener('load', ()=>{
      nodragover(x.contentDocument);
    });
  });
});

修正版

※ブラウザ間の挙動の調整ができてませんでした

<script>
const nodragover=()=>{
  event.preventDefault();
  event.dataTransfer.dropEffect = "none";
}
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('iframe').forEach(x=>{
    x.contentDocument.addEventListener('dragover',nodragover);
    x.addEventListener('load',()=>x.contentDocument.addEventListener('dragover',nodragover));
  });
});
document.addEventListener('dragover',nodragover);

</script>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>

Comments

[nekora]

アドバイスありがとうございます。m(_ _)m
両方試してみたのですが、やはりiframeに入った時、コピーになってしまいます。
alertを仕込んでみましたが、どうやら、iframeに入った時イベントが発火していないようでした。

[yambejp]

ブラウザの誤差を調整してませんでした

Answer 2

自己解決しました（正確にはyambejpさんの回答を受けてググるキーワードを変えて自己解決しました）

参考にしたページ　Javascript（jQuery）でiframe内のイベントを親フレームで取得する

<script>
  window.addEventListener("load", function(e) {
    var iframeContents = document.getElementById("targetHTML");
    iframeContents.contentWindow.addEventListener('dragstart dragenter dragover', function (e) {
      alert("iframeへの侵入を検知しました");
      e.stopPropagation();
      e.preventDefault();
      e.originalEvent.dataTransfer.dropEffect = 'none';
    });
  });
</script>

この部分のコードを⇓のように変えたら成功しました。

<script>
  jQuery(function ($) {
    // 子フレームのイベント
    $('#targetHTML').on('load', function (e) {
      $(this).contents().on('dragstart dragenter dragover', function(e) {
        // console.log('マウスが入ってきた！');
        e.stopPropagation();
        e.preventDefault();

        e.originalEvent.dataTransfer.dropEffect = 'none';
      });
    });
  });
</script>

やってることは、一緒のような気がしますが、jQueryで書くとうまくいきました
諸先輩方、貴重なアドバイスありがとうございました。m(_ _)m