html5网页小游戏 拖拽,HTML5拖拽功能实现的拼图游戏

具体代码如下所示：

drag拖拽

.box{

float: left;

}

img{

width: 150px;

height:150px;

}

#puzzle{

font-size: 0;

margin:80px auto;

padding: 5px;

width: 460px;

}

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

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);

}

}

总结

以上所述是小编给大家介绍的HTML5拖拽功能实现的拼图游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！