HTML5拖拽功能实现的拼图游戏

百变鹏仔 2个月前 (10-18) #H5教程

文章标签拖拽

本文通过实例代码给大家介绍了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>    <p id="puzzle">        <p class="box"><img alt="1"></p>        <p class="box"><img alt="2"></p>        <p class="box"><img alt="3"></p>        <p class="box"><img alt="4"></p>        <p class="box"><img alt="5"></p>        <p class="box"><img alt="6"></p>        <p class="box"><img alt="7"></p>        <p class="box"><img alt="8"></p>        <p class="box"><img alt="9"></p>    </p>    <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>

总结

以上所述就是给大家介绍的HTML5拖拽功能实现拼图游戏的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！

文章推荐

HTML5拖拽功能实现的拼图游戏

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集