3

HTML 5 を使用して Web アプリケーションのドラッグ アンド ドロップ ファイル アップロードを正常に実装しました。ドロップ イベントをリッスンし、event.dataTransfer プロパティからファイル データを取得します。

すべての意図と目的において、これは dropzone.js とまったく同じように機能します。

http://www.dropzonejs.com/

ただし、何らかの理由で、Chrome のダウンロード バーからファイルをドラッグ アンド ドロップできません。

ここに画像の説明を入力

dragenter、dragover、および dragleave イベントは発生しますが、drop イベントは発生しません。これは、dropzone.js デモ Web サイトを使用して確実に再現できます。

なんで？

4

1 に答える 1

9

トリックは、デフォルトで、渡された toのdropEffect属性がデフォルトでに設定されていることです。これを検出し、ユースケースに応じてコピーまたは移動するように設定する必要があります。event.dataTransferdragover'none'

私にとっては、コピーするように設定するとうまくいきました。私はイベントのために何もする必要はありませんdropでした。dragoverイベントの変更のみ。

これが私がしたことです：

// The dragover event
function onDragover(e) {
    if (e.originalEvent) {
        e = e.originalEvent;
    }

    if (!e.dataTransfer) {
        return;
    }

    // Code I added begins here
    var b = e.dataTransfer.effectAllowed;

    e.dataTransfer.dropEffect = ('move' === b || 'linkMove' === b) ? 'move' : 'copy';
    // Code I added ends here

    this.$el.addClass('dragging');

    e.stopPropagation();
    e.preventDefault();
}
于 2013-10-22T20:36:19.870 に答える