ドラッグ＆ドロップしよう！ (4/5)

では、script.jsを作成しましょう。下にそのリストを掲載しておきます。これをHTMLファイルと同じ階層に配置したら、実際にページにアクセスして動作を確認してみましょう。赤い要素を青いエリアにドラッグ＆ドロップすると、「ドラッグされたテキスト！」とテキストが変わり、エリアが赤になります。

ここでは、「初期化処理」「ドラッグの開始（doDragStart）」「ドロップの受け入れ（doDragOver）」「ドロップされた処理（doDrop）」といった処理がそれぞれ用意されています。

init関数
ここでは、Arrayのプロトタイプにcontainsというmethodを追加してあります。これで配列の中に特定の要素が存在するかどうかをチェックできるようにしています。

doDragStart関数
ドラッグ開始の処理です。ここでは、「event.dataTransfer.setData」というものに値を設定しています。dataTransferは、ドラッグ＆ドロップで移動されるデータを管理するオブジェクトです。そして「setData」が、データを設定するためのメソッドになります。これは第１引数にデータの形式を、第２引数に具体的に渡される値をそれぞれ指定します。今回は、簡単なテキストデータを設定していたわけです。

doDragOver関数
ドロップの受入処理です。ここでは「event.dataTransfer.types」というものを利用していますね。dataTransferに用意されている「types」というプロパティは、保管されているデータの形式を管理するものです。ここには、保管されているデータの形式が配列になってまとめられています。この中から"text/plain"という項目があれば、event.preventDefaultでドロップを受け入れるようにしています。それ以外のデータ形式は受け入れません。

doDrop関数
ドロップされたデータの処理を行います。event.dataTransfer.getDataを呼び出し、ドラッグされたオブジェクトに保管されているデータを取り出します。そして、event.target.textContentにその値を設定し、ドロップされたターゲットのオブジェクトにテキストを表示します。また、event.target.style.cssTextを変更し、ターゲットのオブジェクトのスタイルシートを変更しています。

――このように、ドラッグするデータの準備、ドロップの受け入れチェック、ドロップされたデータの受け取り、の３つの処理さえわかれば、ドラッグ＆ドロップでさまざまなデータを受け渡すことが出来るようになります。慣れてしまえば、意外と簡単そうでしょう？

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function init(){
	Array.prototype.contains = function(value){
		var flg = false;
		for(var i in this){
			if(this[i] == value){
				flg = true;
			}
		}
		return flg;
	}
}

function doDragStart(event){
	event.dataTransfer.setData('text/plain', 'ドラッグされたテキスト!')
}

function doDragOver(event){
	var type = event.dataTransfer.types.contains("text/plain");
	if (type){
		event.preventDefault();
	}
}

function doDrop(event){
	var data = event.dataTransfer.getData("text/plain");
	event.target.textContent = data;
	event.target.style.cssText = "background-color:red";
}