html5一到8拼图小游戏,HTML5拖拽功能实现拼图游戏的方法

HTML5拖拽功能实现拼图游戏的方法

发布时间：2020-10-22 15:35:36

来源：亿速云

阅读：93

作者：小新

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拖拽功能实现拼图游戏的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。