ファイルをアップロードするためのドロップ領域が複数あるページを作成しようとしています。各領域には、さまざまな種類の画像を受け入れ/アップロードするための特定のパラメーターがあります。jQuery filedropを使用しました。
独自のドロップ ゾーンではすべてうまくいきますが、複数のエリアでは最後の 1 つだけが機能します。ここで例を見ることができます。
これが filedrop の制限なのか、何か間違っているのかわかりません。
誰かが私を助けることができますか?
さて、これに対する解決策の始まりを見つけました。
できることは、ドロップボックスごとに 1 つの関数を作成することです
$.fn.filedrop = function(options) {
opts1 = $.extend( {}, default_opts, options );
this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
$(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
};
opts1
最初のドロップ ボックスの var を作成し、次に 2 番目のドロップ ボックスの var を作成します...そして、各関数で varをopts2
置き換えると、最初のドロップ ボックスの関数が作成され、2 番目のドロップ ボックスの関数が作成されます。各関数では、ドロップ関数をそれぞれの関数にバインドし、ドロップボックスと同じ数のドロップ関数を作成します。各ドロップ関数で最初の行を追加して、各ドロップでドロップボックスに従ってオプションを更新します$.fn.filedrop
opts
opts1
opts2
$.fn.filedrop1
$.fn.filedrop2
drop1
drop2
this.bind('drop', drop2)
function drop2(e) {
opts = opts2;
opts.drop(e);
files = e.dataTransfer.files;
if (files === null || files === undefined) {
opts.error(errors[0]);
return false;
}
files_count = files.length;
upload();
e.preventDefault();
return false;
}
もちろん、各ドロップボックスに従って各ファイルドロップ関数をバインドしますdropbox2.filedrop2({...