用jQuery UI干简单九宫格拼图

用jQuery UI做简单九宫格拼图

最近在搞一个很复杂的页面，搞得脑子有点疲劳。。。抽空把前段时间用jQuery UI写的一个非常简单的九宫格拼图重新分析一下，转换一下心情。

jQuery UI提供了许多非常有用的工具，如draggable、droppable等。这可以让我们用很少的代码实现复杂的功能，并且做到多浏览器兼容。

这个九宫格拼图根据需求的不同，我做了两个版本。由于两个版本的JS代码变化还是比较大的，所以我准备分开来讲。先讲最初也是最简单的版本。一步步来。

首先建好HTML文件，把你的9张切割好的图片都扔进去：

#jigsaw IMG.dropped{ position:static !important;}

将图片插入对应的div中后，需要将position属性更改为static，则图片会自动与DIV对齐。如果图片没有在对应位置，使用jQuery UI的Draggable方法使图片可以被拖动，并且使用Droppable方法使对应的DIV可以吸附图片。
在DIV吸附图片的时候判断这张图片是不是被吸附在对应的DIV上，是的话给它加上"dropped"类，match数加1，并且禁掉这个DIV的可吸附性。
当match为9的时候，即为9张图片都已经拖到对应位置，给出已经拼图完成的提示就大功告成啦！

另外一个版本比这个稍微高级一点。图片拖对位置之后，还可以重新被拖出去。虽说是在这个版本的基础上改的，但是基本上面目全非了T-T。下次放上来。