開発部のおいぬです（▽・x・▽）
今回はjQuery UIの sortableを使ってパズルを作ってみました。
Contents
jQuery UI sortableとは？
jQueryは、プログラミング言語のひとつ「javascript」をより扱いやすくしたファイル(ライブラリ)で、これを使うとウェブサイトに動きをつけることができます。jQuery UI sortable プラグインは、指定された要素をマウスでドラックして並べ替えを可能にするものです。
デフォルトはこんなかんじ↓
デモ画面はこちら : jQuery UI sortable
ページを見てみるといろいろな形があるんですけど、その中の「グリッドを表示」しているタイプがこれです
デモ画面はこちら : jQuery UI sortable(display grid)
このページを見たとき、番号が振られてる正方形たちを画像にしたらパズルできそう・・・と思ったので作ってみました。
パズルの作り方
ソースはこんな感じです
まずヘッダでstylesheetとscriptを読み込んでjQueryを使えるようにしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <meta charset="UTF-8"> <title>パズル | おいぬの作ってみた</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 500px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 100px; font-size: 4em; text-align: center; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> </head> |
次にbodyです。
ulタグに「id=”sortable”」を加えるだけ！
パズルにする画像は切り刻んで16個のパズルピースにして、リストでばらばらに置きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <ul id="sortable"> <li><img src="/img/p7.png" /></li> <li><img src="/img/p1.png" /></li> <li><img src="/img/p3.png" /></li> <li><img src="/img/p5.png" /></li> <li><img src="/img/p4.png" /></li> <li><img src="/img/p10.png" /></li> <li><img src="/img/p2.png" /></li> <li><img src="/img/p6.png" /></li> <li><img src="/img/p16.png" /></li> <li><img src="/img/p8.png" /></li> <li><img src="/img/p13.png" /></li> <li><img src="/img/p9.png" /></li> <li><img src="/img/p11.png" /></li> <li><img src="/img/p15.png" /></li> <li><img src="/img/p12.png" /></li> <li><img src="/img/p14.png" /></li> </ul> </body> |
これでパズルの完成です！
さてさて、完成させたら何の絵が出てくるでしょうか？
ぜひ遊んでみてください（▽・x・▽）
ABOUT ME