要素をドラッグ時に処理を行う

[ソースコード]

<div id="area1">ドラッグ可能エリア1</div>
<div id="area2">ドラッグ可能エリア2</div>
<div id="area3">ドラッグ可能エリア3</div>


<output></output>
<output></output>

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

function dragEvent(){
	var kekka1 = document.getElementsByTagName('output').item(0);
	var kekka2 = document.getElementsByTagName('output').item(1);
	var div = document.getElementsByTagName('div');

	for(var i = 0 ; i < div.length ; i++){
		div.item(i).draggable = true;
		div.item(i).addEventListener("dragstart" , function(evt){ // divをドラッグ開始したら
			var id = evt.target.id; // targetはdivそのもの。divのidを取得したいからtarget.id。
			kekka1.innerHTML = "div id='" + id + "'をドラッグ開始";
		});
		
		div.item(i).addEventListener("drag" , function(evt){ // divをドラッグ中に
			var id = evt.target.id;
			kekka2.innerHTML = "div id='" + id + "'を移動中";
		});
		
		div.item(i).addEventListener("dragend" , function(){ // divをドラッグ終了したら
			kekka1.innerHTML = "ドラッグ終了";
			kekka2.innerHTML = "";
		});
	} // End for
} // End func dragEvent
</script>

インデックスにもどる