拼图:
把图片名称改为以下形式:
详解都在代码里:
<!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>
<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 image=document.getElementsByTagName('img');
var box=document.getElementsByClassName('box');
var source="";
var nowimage;
var nowimagebox;
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>