H5九宮格拖拽游戲
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽作業(yè)</title>
<link rel="icon" type="iamge/png" href="img/f1.png"/>
<style>
.drag1 {
border: 1px solid black;
width: 460px;
height: 460px;
float: left;
margin: 15px;
}
img{
width: 150px;
height:150px;
}
</style>
</head>
<body>
<div class="drag1">
<img id="f1" draggable="true"/>
<img id="f2" draggable="true"/>
<img id="f3" draggable="true"/>
<img id="f4" draggable="true"/>
<img id="f5" draggable="true"/>
<img id="f6" draggable="true"/>
<img id="f7" draggable="true"/>
<img id="f8" draggable="true"/>
<img id="f9" draggable="true"/>
</div>
<div class="drag1" style="background: url(img/0.jpg);background-size: 450px 450px;"></div>
<p id="info"></p>
<script>
var count=9;
var originalArray=new Array;//原數(shù)組
//給原數(shù)組originalArray賦值
for (var i=0;i<count;i++){
originalArray[i]=i+1;
}
originalArray.sort(function(){ return 0.5 - Math.random(); });
var image = document.getElementsByTagName("img");
for(let i=0;i<image.length;i++){
source = "img/"+originalArray[i]+".jpg";
image[i].setAttribute("src",source);
}
var info = document.getElementById("info");
document.addEventListener("dragstart",function(event){
event.dataTransfer.setData("text",event.target.id);
info.innerText = "拖動開始啦！";
info.style.fontSize = "30px";
});
document.addEventListener("dragend",function(){
info.innerText = "拖動結(jié)束啦！";
info.style.fontSize = "30px";
});
document.addEventListener("dragenter",function(event){
if(event.target.className == "drag1"){
event.target.style.border = "5px solid red";
}
});
document.addEventListener("dragover",function(event){
event.preventDefault();
});
document.addEventListener("drop", function(event) {
event.preventDefault();
if (event.target.className == "drag1") {
event.target.style.border = "";
var id = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(id));
}
});
</script>
</body>
</html>
效果如下
1.png
