「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

jQuery UI「Sortable」を利用したHTML要素の入れ替え方法をメモしておきます。

「Sortable」を利用すると<li>タグの要素などをマウスポインタで選択してドラッグすることでその要素の移動が出来るようになります。

jQuery UI「Sortable」の表示手順

今回はjQuery UI「Tabs」と一緒に実装してみます、

  1. jQuery UIのダウンロードページにアクセスして「Sortable」と「Tabs」へチェックしてダウンロードします。バージョンはどれでも構わないです。またThemesも好みのデザインを選択してダウンロードします。今回はDot Luvを選択してます。
  2. ダウンロードしたファイルの内、必要となるのは以下のファイルとなります。
    分類ファイル名 or フォルダ名パス備考
    jsjquery-1.10.2.js.\jquery-1.10.2.jsjQuery本体
    jsjquery-ui-1.10.4.custom.min.js.\jquery-ui-1.10.4.custom.min.jsカスタマイズしたjQuery UI
    jssortable_demo.js.\sortable_demo.jsこのページの実行サンプル用jsファイル
    ※jQuery UIからはダウンロードされません
    cssjquery-ui-1.10.4.custom.css.\css\dot-luv\jquery-ui-1.10.4.custom.cssjQuery UI ThemesからダウンロードしたCSS
    csssortable_demo.css.\sortable_demo.cssこのページの実行サンプル用CSSファイル
    ※jQuery UIからはダウンロードされません
    画像custom-theme
    ※選択したテーマによりフォルダ名は変わります
    .\css\dot-luv\imagesjQuery UI ThemesからダウンロードしたCSS
    1. HTML
      上記ファイルを指定します。 Sortableで動作させる表示部分を定義します。
  3. CSS
  4. jQuery

実行サンプル

  • 要素A-1
  • 要素A-2
  • 要素A-3
  • 要素A-4
  • 要素A-5
  • 要素B-1
  • 要素B-2
  • 要素B-3
  • 要素B-4
  • 要素B-5

 

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。