めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

HTML5を初めて書いてみました

HTML5

HTML5を初めて書いてみました。とりあえず、本を見ながら。

HTML5&API入門

HTML5&API入門


ドラッグ＆ドロップのAPIを使ってみたんですが、なんだか挙動がおかしい気が...。
Firefox3.6では動いたんだけれど、これでいいのかなあ。
サンプルソースとかダウンロードできるといいんだけれど。
あと、zen-codingのHTML5の場合を調べておこう

※追記
あ、サンプルっぽいのがありました

実際のソース

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5</title>
	</head>
	<body>
		<h1>HTML5</h1>
		<ul id="list" 
				ondragstart="onDragStart(event)"
				ondragenter="onDragEnter(event)"
				ondragover="onDragOver(event)"
				ondrop="onDrop(event)"
			>
			<li class="listItem" id="item1" draggable="true">りんご</li>
			<li class="listItem" id="item2" draggable="true">ぶどう</li>
			<li class="listItem" id="item3" draggable="true">みかん</li>
			<li class="listItem" id="item4" draggable="true">すいか</li>
			<li class="listItem" id="item5" draggable="true">かき</li>
		</ul>
		<script>
		//
		function onDragStart(event) {
			//alert(event.target.tagName.toLowerCase());
			if(event.target.tagName && event.target.tagName.toLowerCase() == "li") {
				event.dataTransfer.setData("listItemId", event.target.id);
			}else{
				event.preventDefault();
			}
		}
		
		// ドロップ処理
		function onDrop(event) {
			var id = event.dataTransfer.getData("listItemId");
			var li = document.getElementById(id);
			//alert(event.currentTarget.id);
			//alert(li.parentNode.id);
			if(li && li.parentNode == event.currentTarget){
				alert('drop');
				li.parentNode.removeChild(li);
				event.currentTarget.appendChild(li);
			}
			event.stopPropagation();	// イベントのバブリングを止める
		}
		
		// ドラッグ中の処理。断続的に発生
		function onDragOver(event) {
			event.preventDefault();    // デフォルト動作を止める
		}
		
		// ドラック中のマウスカーソルが要素と重なる場合
		function onDragEnter(event) {
			var types = event.dataTransfer.types;
			for(var i=0; i<types.length; i++) {
				if(types[i] == "listItemId") {
		//alert('hogehoge');
					event.preventDefault();
					return;
				}
			}
		}

		</script>
	</body>
</html>