用html5模拟的汉诺塔

最新推荐文章于 2023-05-11 09:55:10 发布

chen46311973

最新推荐文章于 2023-05-11 09:55:10 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 汉诺塔

本文链接：https://blog.youkuaiyun.com/chen46311973/article/details/46772249

html5 专栏收录该内容

1 篇文章

订阅专栏

博主利用html5的拖动功能，创建了一个简单的汉诺塔模拟程序。这是他的实践过程记录，欢迎交流讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习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还是很强大的，几个方法就能搞定拖动效果！！