HTML5拖拽拼图效果拼图：
把图⽚名称改为以下形式：
详解都在代码⾥：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>drag拖拽</title>
<style>
#puzzle{
/* 取消图⽚之间的距离 */
font-size:0;
width:750px;
margin:80px auto;
}
.box{
float: left;
}
.
box img{
width:250px;
height:250px;
}
</style>
</head>
<body>
<div id="puzzle">
<div class="box"><img></div>
html代码转链接<div class="box"><img></div>
<div class="box"><img></div>
<div class="box"><img></div>
<div class="box"><img></div>
<div class="box"><img></div>
<div class="box"><img></div>
<div class="box"><img></div>
<div class="box"><img></div>
</div>
<script>
// 获取对象
var ElementsByTagName('img');
var ElementsByClassName('box');
var source="";
var nowimage;
var nowimagebox;
var targetimage;
var targetimage;
// 声明数组，随机放置图⽚
var arr=[];
// 循环9次调⽤getx⽅法，（9个不同的随机数）
for(var i=0;i<9;i++){
getx(arr);
}
/
/ 随机放置图⽚
for(let i=0;i<arr.length;i++){
// 图⽚路径+arr[i]+随机数，9张图⽚位置随机放置
source="images/0"+arr[i]+".jpg";
//添加图⽚位置属性
image[i].setAttribute("src",source);
//拖拽
image[i].onmousedown=function(){
// 保留被拖拽的图⽚
nowimage=this;
// 保留被拖拽的图⽚容器，，他的⽗节点
nowimagebox=this.parentNode;
}
// 取消在默认容器⾥的默认⾏为
box[i].ondragover=function (e){
e.preventDefault();
}
// 拖拽⽂件到⽬标⽂件松开⿏标时
box[i].ondrop=function(){
// 获取当前容器的⼦元素
targetimage=box[i].childNodes[0];
//给当前容易添加元素
box[i].appendChild(nowimage);
//把当前容器的⼦元素添加到拖拽的容器中
nowimagebox.appendChild(targetimage);
}
}
// 产⽣随机数的数组 1-9,(不重复的随机数),
function getx(arr){
for(var i=0;i>-1;i++){
var flag=true;//标志
// ⽣成随机数  1-9
var num=Math.floor(Math.random()*9)+1;
for(var i in arr){
if(arr[i]==num){
var flag=false;
break;
}
}
//若flag==true则表明没有相等的，把这个随机数添加到数组中if(flag==true){
arr.push(num);
return;
}
}
}
// 调⽤
console.log(arr);
</script>
</body>
<ml>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。