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・▽)

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

おいぬ

おいぬ

■部署
開発部

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

■入社年
2016年

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

■座右の銘
百敗不屈

■ひとこと
おなかすいた

関連記事

  1. ⌘

    【初心者向け】Macで作業するなら必須!?便利なショートカット集

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

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

  3. 0627

    【インターン日記】4日間でスマイルヴィジョンの仕事を体験して

  4. SUMMER SONIC 2016行ってきた

  5. AB

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

  6. tukutte7

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

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

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

  8. tukutte08

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

人気記事

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

最近の記事

  1. img2 柿の種より人の心を動かすキャッチコピーを考えてみる(その2)
  2. img_01 西宮の魅力発信
  3. 0831_01 「広告」と「広報」の違い
  4. 4a673b748a84f1f60a5efa69dac4dca8_s 入退場管理システム「スマイルゲート」ご紹介(イベント・セミナー編)
  5. img1 中山寺に行ってきました(※仕事です)
2017年9月
« 8月    
 123
45678910
11121314151617
18192021222324
252627282930  
PAGE TOP