您的位置：首页 > Web前端 > HTML5

用html5模拟的汉诺塔

2015-07-06 11:16 537 查看

今天学习html5拖动的时候突然想到可以用html5来模拟个汉诺塔，说做就做。以下是我的实现，比较简单勿喷，不过欢迎指正和探讨

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{border:solid 1px black;width:200px; height:200px; padding:10px;}
.hanoi{border:solid 1px black; padding:5px;}
#hanoi3{width:150px; height:150px;}
#hanoi2{width:100px; height:100px;}
#hanoi1{width:60px; height:60px;}

</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var droper = document.getElementById(data);
if (droper.childElementCount == 0) { //判断是否是多个一起拖动，不是才可以进行拖动
if (droper.clientHeight < ev.target.clientHeight && droper.clientWidth < ev.target.clientWidth) {
ev.target.appendChild(document.getElementById(data));
}
}
else {alert("一次只能拖动一个汉诺塔");}
}
</script>
</head>
<body>
<div id="container1" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"><div id="hanoi3" class="hanoi"  ondrop="drop(event)" ondragover="allowDrop(event)"draggable="true" ondragstart="drag(event)"><div id="hanoi2" class="hanoi"draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)"><div id="hanoi1" class="hanoi"draggable="true" ondragstart="drag(event)"></div></div></div></div>
<div id="container2" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="container3" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

总结：html5还是很强大的，几个方法就能搞定拖动效果！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航