拼图大家应该都很熟悉，而且经常的玩。现在手机、电脑等设备上也出现了很多的拼图游戏，它在我们苯侈忏帘空闲的时候给我们带来了很多乐趣。接下来，我来和大家分享一下用html5的拖放制作拼图。
工具/原料
素材图片
方法/步骤
1、首先，我们准备好拼图所需的素材图片。注意图片的命名格式。
2、接着，我们新建一个html页面，并用记事本打开。
3、我们螅岔出礤在记事本里写下如下代码：<!DOCTYPEhtml><html><head><metacharset="utf-8媪青怍牙"><title></title><style>.box{float:left;}img{width:150px;height:150px;}#puzzle{font-size:0;margin:80pxauto;padding:5px;width:460px;}</style></head><body><divid="puzzle"><divclass="box"><imgalt="1"></div><divclass="box"><imgalt="2"></div><divclass="box"><imgalt="3"></div><divclass="box"><imgalt="4"></div><divclass="box"><imgalt="5"></div><divclass="box"><imgalt="6"></div><divclass="box"><imgalt="7"></div><divclass="box"><imgalt="8"></div><divclass="box"><imgalt="9"></div></div><script>varimage=document.getElementsByTagName("img");varbox=document.getElementsByClassName("box");image.draggable=true;varsource="";varnowImage;varnowImageBox;varthenImage;for(leti=0;i<image.length;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();}box[i].ondrop=function(event){thenImage=box[i].childNodes[0];box[i].appendChild(nowImage);nowImageBox.appendChild(thenImage);}}</script></body></html>
4、输入完成后保存，并用浏览器打开。我们会看到一个九宫格的拼图。
5、我们鼠标拖住一个图片至另一个图片位置，可交换两个图片的位置。
6、经过多次拖动我们，最终我们会拼成一个美女。
