ファイルシステムイメージのブラウザへのドラッグを無効にします。

Question

私はHTML5ファイルAPIを試しています。しかし、ブラウザに画像をドラッグすると画像が表示されるデフォルトの動作がブラウザに表示されます。しかし、イメージを表示するのではなくアップロードすることが目的の場合、これは厄介なことです。

この現象を防ぐ方法があるのでしょうか？私はstopPropagation/preventDefaultをややうまく動作するondropイベントで試しましたが、ページ上のどこにでもイメージをドロップできるという印象を与える "drop"カーソルを残しています。

理想的には、画像がドロップされることになっている指定された領域に「ドロップ」カーソルが表示されます。

Answer 1

dataTransferオブジェクトは、dropEffectプロパティとeffectAllowed特性を有します。違いはっきりしていないのですが、どちらも 'none'に設定すると助けになります。

$(document).bind({ 
    dragenter: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
    dt.effectAllowed = dt.dropEffect = 'none'; 
    }, 
    dragover: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
     dt.effectAllowed = dt.dropEffect = 'none'; 
    } 
}); 

- http://jsfiddle.net/andreymir/H3RR7/embedded/result/を参照してください - 矩形にのみドロップしてください。

Answer 2

おそらくこれはあなたが探しているものですか？私はこれを自分で設計しました。

http://rightandrong.info/html5upload/Upload.html