本文介绍了如何利用jQuery UI的draggable和droppable功能，创建一个简单的九宫格拼图。通过编写JavaScript和CSS，将9张图片打乱顺序并允许用户通过拖放操作复原。当所有图片正确放置时，会显示拼图完成的提示。
最近在搞一个很复杂的页面，搞得脑子有点疲劳。。。抽空把前段时间用jQuery UI写的一个非常简单的九宫格拼图重新分析一下，转换一下心情。
Github URL: https://github.com/JennieJi/jquery-jigsaw
jQuery UI提供了许多非常有用的工具，如draggable、droppable等。这可以让我们用很少的代码实现复杂的功能，并且做到多浏览器兼容。
这个九宫格拼图根据需求的不同，我做了两个版本。由于两个版本的JS代码变化还是比较大的，所以我准备分开来讲。先讲最初也是最简单的版本。一步步来。
- 首先建好HTML文件，把你的9张切割好的图片都扔进去：
<!doctype> <html> <head> </head> <body> <div id="jigsaw"> <img src="images/puzzle_r1_c1.gif" width="150" height="100" alt="Puzzle Piece"/> <img src="images/puzzle_r1_c2.gif" width="150" height="100&#
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
