html拖拽游戏,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);

}

}