Home > Article > Web Front-end > Puzzle game implemented with HTML5 drag and drop function

Puzzle game implemented with HTML5 drag and drop function

青灯夜游forward: 2018-10-09 16:32:136336browse

This article introduces you to the jigsaw puzzle implemented by HTML5 drag and drop function through example code. The code is simple and easy to understand, very good, and has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The specific code is as follows:

<!--代码如下，最下面给出了我测试用的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>

## Summary

The above is the entire content of the HTML5 drag and drop function to implement the jigsaw puzzle. I hope it will be helpful to everyone's learning. For more related tutorials, please visit

Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Puzzle game implemented with HTML5 drag and drop function. For more information, please follow other related articles on the PHP Chinese website!

php html5

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Example code for canvas to implement QR code and image synthesisNext article：Example code for canvas to implement QR code and image synthesis

See more

Puzzle game implemented with HTML5 drag and drop function

Related articles