具体代码如下所示：
.box{
float: left;
}
img{
width: 150px;
height:150px;
}
#puzzle{
font-size: 0;
margin:80px auto;
padding: 5px;
width: 460px;
}
<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[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>
想要了解更多关于html5开发方面内容的小伙伴，请关注扣丁学堂html5培训官网、微信等平台，扣丁学堂it职业在线学习教育有专业的html5讲师为您指导，此外扣丁学堂老师精心推出的html5视频教程定能让你快速掌握html5从入门到精通开发实战技能。
h5基础课程：/course/320523flowtoken=1008606【扫码进入html5前端开发vip免费公开课】
注：点击(了解更多)进入课程直播间