ドラッグ要素からドロップ要素にデータを受け渡す
dataTransfar.setData(" MIMEタイプ " , ); / dataTransfar.getData(" MIMEタイプ ");

[ソースコード]

<script type="text/JavaScript">
window.addEventListener("load" , Start);

function Start(){
	var output = document.getElementsByClassName('result').item(0);
	var drag_div = document.getElementsByTagName('div');
	var dropArea = document.getElementById('trashbox');
	//console.log(drag_div.length); // 4

		/************************
		ドラッグ要素側
		************************/
		for(var i = 0 ; i < drag_div.length-2 ; i++){ // 一番下のdivは動かさない
			drag_div.item(i).draggable = true;

			drag_div.item(i).addEventListener("dragstart" , function(evt){ // ドラッグが始まったら
				evt.dataTransfer.setData("text" , this.innerHTML); // divの内部テキストを取得して
			});
			} // End for
			
		/*************************
		ドロップ要素側
		*************************/
		dropArea.addEventListener("dragover" , function(evt){ // ドロップ要素に差し掛かったら
			//console.log(evt.target); // id="trashbox"
			evt.preventDefault(); // デフォルトのドロップ拒否をキャンセル
			this.style.backgroundColor = "red";
		});
		
		dropArea.addEventListener("dragleave" , function(){
			this.style.backgroundColor = "#000";
		});
		
		dropArea.addEventListener("drop" , function(evt){
			var get_item = evt.dataTransfer.getData("text");
			//console.log(get_item);
			this.style.backgroundColor = "#000";
			output.innerHTML = get_item;
		});
} // End func Start()

/*************************
空にする
*************************/
var btn = document.getElementsByName('trash').item(0);

btn.onclick = function(){
	var trashbox = document.getElementsByClassName('result').item(0);
	var in_box = trashbox.firstChild.nodeValue;
	trashbox.firstChild.nodeValue = "";
}
</script>

インデックスにもどる