Heim > Artikel > Web-Frontend > Puzzlespiel mit HTML5-Drag-and-Drop-Funktion implementiert
Puzzlespiel mit HTML5-Drag-and-Drop-Funktion implementiert
- 青灯夜游nach vorne
- 2018-10-09 16:32:136385Durchsuche
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>
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
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!