jQueryでdrag & drop

このエントリーはjQuery Advent Calendar 2013の 7日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

前回はFile APIをファイルAPIを利用したリアルタイムプレビューを解説したので、今回はページなどにブラウザの外からファイルをドラッグ&ドロップしたファイルからFileオブジェクトを取り出す方法について解説を行ないます。

まず、次のように指定を行うと、指定された要素にファイルをdrag & dropするとFileListオブジェクトを取得することができます。

$("div").on("drop",function(e){
	e.preventDefault();
	console.log(e.originalEvent.dataTransfer.files);
});
$("div").on("dragover",function(e){
	e.preventDefault();
});

サンプル1

dragoverイベントはファイルがターゲット上にドラッグされた時に、dropイベントはドロップされた際に発火するイベントです。jQueryの標準イベントにはありませんのでonメソッドを利用して設定しましょう。

また、ブラウザは標準ではファイルがdrag & dropされた際にそのファイルを表示しようとするので「e.preventDefault();」を指定し標準の挙動を抑制しておきましょう。

「e.dataTransfer.files」のようにjQueryのイベントオブジェクトにアクセスしてもFileListオブジェクトは取得できません。「e.originalEvent.dataTransfer.files」のようにしてjQueryが処理前のイベントオブジェクトにアクセスする必要があるので注意してください。

前回のFile APIを組み合わせると以下のようなスクリプトでdrag & dropでリアルタイムプレビューが可能になります。

var reader = new FileReader();
reader.addEventListener('load', function() {
	$("img").attr("src",reader.result);
});
$(".dnd").on("drop",function(e){
	e.preventDefault();
	for(var i = 0;i<e.originalEvent.dataTransfer.files.length ;i++){
		reader.readAsDataURL(e.originalEvent.dataTransfer.files[i]);
	}
});
$(".dnd").on("dragover",function(e){
	e.preventDefault();
});

サンプル2

次回はFileオブジェクトをAjaxで送信する方法です。

関連エントリー

jQuery基礎文法最速マスター
jQueryのpropメソッドとattrメソッド
jQueryのstopメソッドとfinishメソッド
jQueryのmouseoverメソッドとmouseenterメソッドの違い
イベントデリゲートで理解するjQueryのonメソッド

スポンサードリンク

«Androidのviewportに対する数値指定 | メイン | File APIとAjax»