【作ってみた】jQuery UI sortable でデジタルパズル

mv_puzzle

開発部のおいぬです(▽・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・▽)

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

おいぬ

おいぬ

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
闇属性

■入社年
2016年

■趣味
音楽、工作、踊ってみた、たべる

■座右の銘
百敗不屈

■ひとこと
おなかすいた

関連記事

  1. 2017年スタートアップトレンド (アメリカ版)

    2017年スタートアップトレンド (アメリカ版)

  2. 足し算

    【作ってみた】Googleスプレッドシートで100マス計算表(足し算編)

  3. mv

    【作ってみた】googleスプレッドシートで在庫管理表

  4. 石田三成CM

    話題沸騰!石田三成CM続編公開!

  5. ひょうご就職サミット2018

    今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!

  6. AB

    【作ってみた】googleスプレッドシートでチーム分けサイコロ

  7. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】

    安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】vol.2

  8. IMG_6697

    2017年新年のご挨拶。昨年を振りかえって

人気記事

  1. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  2. mv
  3. タイ料理「天満3パクチー」
  4. 新入社員研修「伝える+伝わるセミナー」
  5. 2017年スタートアップトレンド (アメリカ版)
  6. blog03760x370
  7. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK
  8. クリアボタン
  9. IMG_6697

最近の記事

  1. 大内氏セミナー 「テレビ活用」7つの成功ルール 出版記念セミナーに行ってきました
  2. mv_puzzle 【作ってみた】jQuery UI sortable でデジタルパズル
  3. 0I9A6577ISUMI_TP_V 一人でも楽しめる!GWの過ごし方5選!!
  4. e3651f3e-ca5a-4f0a-8ccb-9b3ffec3c2f3 スマイルヴィジョン5月会社見学説明会のお知らせ
  5. ひょうご就職サミット2018 今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!
2017年5月
« 4月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP