5

Firefox でファイルのドラッグ アンド ドロップを実行しようとしています。現在、いくつかのファイルをドロップゾーンにドラッグして、ドロップされたファイルのリストを取得しようとしています。この時点では、まだファイルに対して何もしたくありません。

ファイル (この場合は画像ですが、ファイルの種類に関係なく同じことが起こります) をファインダーからドロップゾーンにドラッグすると、dragenter イベントと dragexit イベントが発生するのがわかります。ファイルをドロップゾーンにドロップすると、ドロップ イベントが発生しません。代わりに、ブラウザが独自に画像を開きます (たとえば、アドレスには file://path/to/my/image.png が表示されます)。

私のJavaScriptは次のようになります：

  dropbox = document.getElementById("standard_file_dropzone");

  dropbox.addEventListener("dragenter", function(){console.log('standard enter');}, false);
  dropbox.addEventListener("dragexit", function(){console.log('standard exit');}, false);
  dropbox.addEventListener("dragover", $.noop, false);
  dropbox.addEventListener("drop", function ( event ) {
                                     console.log('standard dropped');
                                     event.stopPropagation();
                                     event.preventDefault();

                                     if(( typeof event.dataTransfer.files !== 'undefined' ) &&
                                        ( event.dataTransfer.files.length > 0 )) {
                                       console.dir( event.dataTransfer.files );

                                     }
                                     return false;
                                   }, false);

私のHTMLは次のようになります。

    <div id="standard_file_dropzone" style="height:150px; width:150px; border:solid;">
      Standard Drop Files Here
    </div>

だから私はここで何が間違っているのだろうか？上記のコードには (少なくとも私には明らかな) 間違いはないようです。dragenter/exit イベントが発火しているのに、drop イベントが発火しないのはなぜですか? ブラウザがファイル自体を開こうとするのはなぜですか?

注意すべきことの 1 つは、Chrome で自分のページを開くと、これは期待どおりに機能するため、これは Firefox 固有の問題です。

thnx、クリストフ

4

1 に答える 1

5

この問題は、$.noop をドラッグオーバー ハンドラとして使用していました。実際に伝播とバブリングを停止する関数に置き換えると、期待どおりに動作するようになりました。

私は時々とてもばかです。:p

于 2012-06-11T17:30:03.537 に答える