Puzzlespiel mit HTML5-Drag-and-Drop-Funktion implementiert-H5-Tutorial-php.cn

Puzzlespiel mit HTML5-Drag-and-Drop-Funktion implementiert

青灯夜游

Freigeben： 2018-10-09 16:39:45

nach vorne

6434 Leute haben es durchsucht

Dieser Artikel führt Sie anhand eines Beispielcodes in die durch die HTML5-Drag-and-Drop-Funktion implementierte Puzzle ein. Der Code ist einfach und leicht zu verstehen, und ich hoffe, dass er einen gewissen Referenzwert hat es wird Ihnen hilfreich sein.

Der spezifische Code lautet wie folgt:

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

Nach dem Login kopieren

Zusammenfassung

Das Obige ist der gesamte Inhalt der HTML5-Drag-and-Drop-Funktion zur Implementierung des Puzzles. Ich hoffe, dass es für das Lernen aller hilfreich ist . Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

Das obige ist der detaillierte Inhalt vonPuzzlespiel mit HTML5-Drag-and-Drop-Funktion implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!