web-dev-qa-db-ja.com

ドラッグオーバーが処理されない限り、HTML5ドロップイベントは機能しません

dropイベントを聞いてe.preventDefault()を実行していますが、ドロップされたファイルを開こうとしています。昨日までは順調でした。しかし、ちょうど今日それは何らかの未知の理由で壊れました。私が作った - JsFiddle#bwquR/10 同じを反映します。

編集：

dragoverイベントを受け取らないと、dropを処理できないようです。フィドルでもコメントを書くとdragover動きません。
実際の作業でdragoverのスペルを間違えましたが、それでも質問dropはdragoverなしでは機能しません

フィドルは実際に機能していましたが、本体が小さかったです（テキストDROPのみ）。 dropイベントは、DROPテキストが身体全体に存在しない小さな領域でのみ発生していました。だから私はそれが機能していないと思いました。混乱させて申し訳ありません。

javascripthtmlgoogle-chromedrag-and-dropdom-events
35
Neel Basu

これは、dragOverイベントハンドラーがないと、dragOverイベントのデフォルトのイベントハンドラーが使用されるため、その後にドロップイベントがトリガーされないためだと思います。 e.preventDefaultドロップイベントの前のdragOverイベント。

40
zuo

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

ドロップを許可する場合は、イベントをキャンセルしてデフォルトの処理を防止する必要があります。これを行うには、属性定義のイベントリスナーからfalseを返すか、イベントのevent.preventDefaultメソッドを呼び出します。後者は、別のスクリプトで定義された関数でより実現可能かもしれません。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Dragenterイベントとdragoverイベントの両方でpreventDefaultメソッドを呼び出すと、その場所でのドロップが許可されます。ただし、一般的にpreventDefaultメソッドは、リンクがドラッグされている場合など、特定の状況でのみ呼び出すことをお勧めします。これを行うには、条件をチェックし、条件が満たされた場合にのみイベントをキャンセルする関数を呼び出します。条件が満たされない場合は、イベントをキャンセルしないでください。ユーザーがマウスボタンを離してもドロップは発生しません。

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);
5
Mike Lee

問題を正しく理解しているかどうかはわかりませんが、ドロップされたファイルを読みたい場合は、ドラッグオーバーイベントを処理し、少なくとも次のコード行を配置する必要があります。

evt.dataTransfer.dropEffect = 'copy';

それ以外の場合、dropEffectはデフォルトでnullになり、データを取得できません。

3
mnowotka

私にとってはうまくいきます。これをHTTPまたはFILE URLとしてロードしていますか？ ChromeではHTTP URLである必要があると思います。

1
Maurice