dragenter
およびイベントもリッスンし、dragover
デフォルトの動作を防止する必要があります。drop
また、イベント ハンドラーでも既定の動作を防止する必要があります。
たとえば、このようなことをしたいかもしれません...
var $dropArea = $( "#drop-area" );
$dropArea.on({
"drop" : makeDrop,
"dragenter": ignoreDrag,
"dragover": ignoreDrag
});
function ignoreDrag( e ) {
e.preventDefault();
}
function makeDrop( e ) {
var fileList = e.originalEvent.dataTransfer.files,
fileReader;
e.preventDefault();
if ( fileList && fileList.length > 0 ) {
fileReader = new FileReader();
fileReader.onloadend = handleReaderOnLoadEnd( $( "<img />" ) );
fileReader.readAsDataURL( fileList[ 0 ] );
}
}
function handleReaderOnLoadEnd( $image ) {
return function( event ) {
$image.attr( "src", this.result )
.addClass( "small" )
.appendTo( "#drop-area" );
};
}
この JSFiddle http://jsfiddle.net/qsyNW/で実際の例を見つけることができます。
注: 私が行ったように、これで jQuery を使用する必要はありません。e.originalEvent
ただし、 jQueryを使用する場合はdrop
、dataTransfer.files
.