代码：
首先我是书写基本的样式，根据自己的喜好进行书写，我觉得还可以在此基础上进行修改。
<style>
.area{
width:603px;
height:603px;
border: 1px solid red;
}
img{
width: 200px;
height: 200px;
}
.div1{
width: 200px;
height: 200px;
border: 0px solid red;
border-left: 0px;
position: relative;
float: left;
}
</style>
</head>
<body>
<img id="img1" src="../images/2.png" alt="">
<img id="img2" src="../images/1.png" alt="">
<img id="img3" src="../images/8.png" alt="">
<img id="img4" src="../images/3.png" alt="">
<img id="img5" src="../images/5.png" alt="">
<img id="img6" src="../images/4.png" alt="">
<img id="img7" src="../images/7.png" alt="">
<img id="img8" src="../images/6.png" alt="">
<img id="img9" src="../images/9.png" alt="">
<div id="area"class="area">
<div class="div1" id="div1"></div>
<div class="div1" id="div2"></div>
<div class="div1" id="div3"></div>
<div class="div1" id="div4"></div>
<div class="div1" id="div5"></div>
<div class="div1" id="div6"></div>
<div class="div1" id="div7"></div>
<div class="div1" id="div8"></div>
<div class="div1" id="div9"></div>
</div>
采用拖拽接口的方式进行一步步的分析并且在相应的拖拽事件中进行定义。
<script>
var num=0;
document.ondragstart=function(e){
// 存储拖拽的元素
e.dataTransfer.setData("text/html",e.target.id);
}
document.ondragover=function(e){
// 阻止浏览器的默认行为
e.preventDefault();
}
document.ondrop=function(e){
//采用dataTransfer存储拖拽元素只能在drop中获取
//下面的判断目的是为了只允许拖拽的图片放在指定的框的位置和原先存放图片的位置，其它地方的位置不允许放置
if(e.target.className=="div1"||e.target.id=="all"){
var id=e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));
}
}
</script>
效果图
当拖拽的地方弄错了可以拖回原来存放图片的位置。
此拼图出自自己的设计和想法所做出来的，若有冲突纯属巧合，越努力越幸运！
扫一扫
1247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
