Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

【作ってみた】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・▽)

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おいぬ

おいぬ

■部署
開発部

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

■入社年
2016年

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

■座右の銘
百敗不屈

■ひとこと
おなかすいた

関連記事

  1. e35022352b65f9ac4c6fbba0828d9a19_s

    選ばれるホームページ作り|自社の研究開発(青チップ)とは

  2. RoastBeefMAZESOBA

    肉々しい社長ランチ会(1月)

  3. FullSizeRender-9-1-1024x768

    コワーキングスペースで働く3つのメリット

  4. SUMMER SONIC 2016行ってきた

  5. img2

    柿の種より人の心を動かすキャッチコピーを考えてみる(その2)

  6. 石田三成CM

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

  7. tukutte08

    【作ってみた】ひらがな→モールス信号変換器

  8. img1

    セミナー『WebプロデューサーとWebディレクターが見る世界』

人気記事

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

最近の記事

  1. RoastBeefMAZESOBA 肉々しい社長ランチ会(1月)
  2. S__4505603-1024x768 コワーキングを経営する事になった話2-料金を考える
  3. 1490862068447-1-1024x768 コワーキングを経営する事になった話1-名前を決めました
  4. NsNb7ndCeV3FkP61515754521_1515756417 【WordPress】MW WP Formを使用したお問い合わせフォームの作成
  5. db43c292d744f2ab9bcec5c9e2012172_m 【WordPress】プラグインの使い方(インストール・有効化・停止・削除)
2018年2月
« 1月    
 1234
567891011
12131415161718
19202122232425
262728  
PAGE TOP