小时候玩的拼图游戏, 大家好记得吗? 有没有想过自己做一个这样的游戏呢, 特别一些特殊的日子, 送给他 (她) 呢. 为了实现大家的想法, 小猿圈 web 前端讲师就讲讲利用 html5 拖拽功能实现的拼图游戏.
具体代码如下所示:
<!-- 代码如下, 最下面给出了我测试用的 9 张 250*250 的图片切片 -->
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- drag 拖拽
- </title>
- <style>
- .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{ font-size:
- 0; margin:80px auto; padding: 5px; width: 460px; }
- </style>
- </head>
- <body>
- <div id="puzzle">
- <div class="box">
- <img alt="1">
- </div>
- <div class="box">
- <img alt="2">
- </div>
- <div class="box">
- <img alt="3">
- </div>
- <div class="box">
- <img alt="4">
- </div>
- <div class="box">
- <img alt="5">
- </div>
- <div class="box">
- <img alt="6">
- </div>
- <div class="box">
- <img alt="7">
- </div>
- <div class="box">
- <img alt="8">
- </div>
- <div class="box">
- <img alt="9">
- </div>
- </div>
- <script>
- var image = document.getElementsByTagName("img");
- var box = document.getElementsByClassName("box");
- image.draggable = true;
- var source = "";
- var nowImage;
- var nowImageBox;
- var thenImage;
- for (let i = 0; i < image.length; i++) {
- source = "picture" + i + ".jpg";
- image[i].setAttribute("src", source);
- image[i].onmousedown = function() {
- nowImage = this;
- nowImageBox = this.parentNode;
- }
- box[i].ondragover = function(event) {
- event.preventDefault(); // 去除 ondragover 事件的默认行为, 该行为默认无法将数据或者元素放置到其他元素
- }
- box[i].ondrop = function(event) {
- thenImage = box[i].childNodes[0];
- box[i].appendChild(nowImage);
- nowImageBox.appendChild(thenImage);
- }
- }
- </script>
- </body>
- </HTML>
以上就是小猿圈 Web 前端讲师针对 HTML5 拖拽功能实现的拼图游戏的讲解, 你有想过学习前端开发嘛, 想学习前端可以到小猿圈去直接观看 Web 前端自学2群: 738735873, 这里面从基础到实战的所有学习资料, 可以满足你提升自己, 为你实现编程梦想的起点.
来源: http://www.jianshu.com/p/3e94fc24ca80