7

HTML5ファイルAPIを試しています。ただし、画像をブラウザにドラッグすると、ブラウザには画像が表示されるデフォルトの動作があることに気付きました。ただし、画像を表示するのではなくアップロードすることが目的の場合、これは煩わしい場合があります。

この動作を防ぐ方法があるかどうか疑問に思っていますか？ある程度機能するオンドロップイベントでstopPropagation/PreventDefaultを試しましたが、「ドロップ」カーソルをそのままにして、画像をページのどこにでもドロップできるという印象を与えています。

理想的には、画像がドロップされる予定の指定された領域にのみ「ドロップ」カーソルが表示されます。

4

2 に答える 2

14

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/を参照してください-ドロップは長方形にのみ許可されます。

于 2011-09-13T03:52:38.100 に答える
0

おそらくこれはあなたが探しているものですか？これは自分でデザインしました。

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

于 2011-09-13T00:37:36.717 に答える