龙空技术网

小猿圈web前端之HTML5拖拽功能实现的拼图游戏

路飞学城Luffycity 238

前言:

此刻朋友们对“picturehtml5”都比较关切,你们都想要剖析一些“picturehtml5”的相关资讯。那么小编在网摘上汇集了一些关于“picturehtml5””的相关文章,希望大家能喜欢,各位老铁们快快来了解一下吧!

小时候玩的拼图游戏,大家好记得吗?有没有想过自己做一个这样的游戏呢,特别一些特殊的日子,送给他(她)呢。为了实现大家的想法,小猿圈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拖拽功能实现的拼图游戏的讲解,你有想过学习前端开发嘛,想学习前端可以到小猿圈去直接观看,这里面从基础到实战的所有学习资料,可以满足你提升自己,为你实现编程梦想的起点。

标签: #picturehtml5