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. img1

    MG研修 at スマイルヴィジョン

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

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

  3. db43c292d744f2ab9bcec5c9e2012172_m

    【WordPress】プラグインの使い方(インストール・有効化・停止・削除)

  4. NHK大河ドラマ真田丸とMEET三成展

    戦なき世を創るため… NHK大河ドラマ「真田丸」×石田三成企画展「MEET三成展」へ!

  5. 0

    2017年度 経営計画発表会が開催されました

  6. AB

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

  7. tukutte7

    【作ってみた】画像の上に文字を表示させる方法

  8. 四則編

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

人気記事

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

最近の記事

  1. mv_ssl01 「常時SSL対策」セットアップサービスについて
  2. mv_tsukatte02 【使ってみた】プログラミングが練習できるサイトを集めてみた
  3. c48549e5450e30d62215e30331440f8e_m 【WordPress】記事の順番を直感的に並べ替える!Intuitive Cus…
  4. mv_tukutte10 【作ってみた】LINE NotifyとGoogle Apps Scriptで天気…
  5. IMG_1067 ペンキを塗ってみた|コワーキングを経営する事になった話3
2018年5月
« 4月    
 123456
78910111213
14151617181920
21222324252627
28293031  
PAGE TOP