imageContainer divにファイルをドラッグしても何も起こりません。なぜですか?などコンソールで何も、ページ上の何もない、jQuery/HTML5 FileAPI:ドラッグイベントがトリガしているように見えないのはなぜですか?
<div id="imageContainer" style="height: 724px; width: 100%; "></div>
...
$('#imageContainer').on({
dragenter: function dragEnter() {
console.log('enter');
$(this).css('background-color', 'lightBlue');
},
dragleave: function dragLeave() {
console.log('leave');
$(this).css('background-color', 'white');
},
dragover: false,
drop: function dragDrop (e) {
console.log('drop');
jQuery.each(e.dataTransfer.files, function (index, file) {
var fileReader = new FileReader();
fileReader.onload = (function (file) {
return function (e) {
$(this).append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + e.target.result + '</div>');
};
})(file);
fileReader.readAsDataURL(file);
});
}
});
しかし、固定さえ、それは原因ではありません。それでも同じ問題。 – BrianFreud
^^これまでの回答に関連しています。 :D – BrianFreud
Hmmm、私はこの時点でのみChromeを使用していました。スクリプト内の何かがChromeとFirefoxの両方にエラーを飲み込んでいるようですが、これは残念なことですが、私はこれを見ることはできません。 Firefoxでは、少なくとも青/白の色の変化が起こりますが、Chromeではまったく何も起こりません。この回答が特に当てはまるドロップイベントを再現すると、私はこの答えが正しいことを推測しなければなりません。おそらく、コード自体は間違っています。画像を削除するとChromeでは何も起こりませんし、Firefoxでは通常と同じように画像を新しいページとして読み込みます。 – BrianFreud