【作ってみた】jQuery UI sortable でデジタルパズル|大阪のホームページ制作会社 SmileVision

社員ブログ 【作ってみた】jQuery UI sortable でデジタルパズル

開発部のおいぬです(▽・x・▽)
今回はjQuery UIの sortableを使ってパズルを作ってみました。

jQuery UI sortableとは?

jQueryは、プログラミング言語のひとつ「javascript」をより扱いやすくしたファイル(ライブラリ)で、これを使うとウェブサイトに動きをつけることができます。jQuery UI sortable プラグインは、指定された要素をマウスでドラックして並べ替えを可能にするものです。
デフォルトはこんなかんじ↓
貼り付けた画像_2017_05_12_10_29
デモ画面はこちら : jQuery UI sortable
ページを見てみるといろいろな形があるんですけど、その中の「グリッドを表示」しているタイプがこれです
Sortable___jQuery_UI03
デモ画面はこちら : jQuery UI sortable(display grid)
このページを見たとき、番号が振られてる正方形たちを画像にしたらパズルできそう・・・と思ったので作ってみました。
 

パズルの作り方

ソースはこんな感じです
まずヘッダでstylesheetとscriptを読み込んでjQueryを使えるようにしてください。


次にbodyです。
ulタグに「id=”sortable”」を加えるだけ!
パズルにする画像は切り刻んで16個のパズルピースにして、リストでばらばらに置きます。


これでパズルの完成です!
さてさて、完成させたら何の絵が出てくるでしょうか?
ぜひ遊んでみてください(▽・x・▽)

パズル___おいぬの作ってみた

ABOUT ME
おいぬ
■部署 開発部 ■スペック(Level、身長、座高、属性、資格) 闇属性 ■入社年 2016年 ■趣味 音楽、工作、踊ってみた、たべる ■座右の銘 百敗不屈 ■ひとこと おなかすいた