ドラッグ＆ドロップで並べ替えた順番を保存・再現
jQuery UI の Sortable プラグインを使ったドラッグ＆ドロップによる並べ替えにおいて、並べ替え後の順番をクッキー（cookie）に格納し、次回ページを開いたときに、前回並べ替えた順番で表示させる方法。cookie への格納には、jQuery の Cookie プラグインを使用する。
< script > jQuery ( function ( ) { jQuery ( '#jquery-ui-sortable' ) . sortable ( ) ; jQuery ( '#jquery-ui-sortable' ) . disableSelection ( ) ; jQuery ( '#jquery-ui-sortable' ) . sortable ( { update : function ( event , ui ) { var updateArray = jQuery ( '#jquery-ui-sortable' ) . sortable ( 'toArray' ) . join ( ',' ) ; jQuery . cookie ( 'jquery-ui-sortable' , updateArray , { expires : 1 } ) ; } } ) ; if ( jQuery . cookie ( 'jquery-ui-sortable' ) ) { var cookieValue = jQuery . cookie ( 'jquery-ui-sortable' ) . split ( ',' ) . reverse ( ) ; jQuery . each ( cookieValue , function ( index , value ) { jQuery ( '#' + value ) . prependTo ( '#jquery-ui-sortable' ) ; } ) ; } } ) ; // -->
CSS#jquery-ui-sortable { list-style-type : none ; margin : 0 ; padding : 0 ; width : 70% ; } #jquery-ui-sortable li { margin : 0 3px 3px 3px ; padding : 0.3em ; padding-left : 1em ; font-size : 15px ; font-weight : bold ; cursor : move ; } -- >
HTML < ul id = "jquery-ui-sortable" > < li id = "jquery-ui-sortable-item-1" class = "ui-state-default" >項目 1 < / li > < li id = "jquery-ui-sortable-item-2" class = "ui-state-default" >項目 2 < / li > < li id = "jquery-ui-sortable-item-3" class = "ui-state-default" >項目 3 < / li > < li id = "jquery-ui-sortable-item-4" class = "ui-state-default" >項目 4 < / li > < li id = "jquery-ui-sortable-item-5" class = "ui-state-default" >項目 5 < / li > < li id = "jquery-ui-sortable-item-6" class = "ui-state-default" >項目 6 < / li > < li id = "jquery-ui-sortable-item-7" class = "ui-state-default" >項目 7 < / li > < / ul >スポンサード リンク
関連記事
- ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加
- ドラッグ＆ドロップで並べ替える対象となる要素を指定
- 格子状に並べたリストをドラッグ＆ドロップで並べ替え
- ドラッグ＆ドロップで並べ替えるときのドラッグできる部分を指定
- 複数のリストの境界を越え、ドラッグ＆ドロップで並べ替え
- ドラッグ＆ドロップで並べ替えた順番を送信
- jQuery UI の Sortable による並べ替えを楽にするオプション
- jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え
- jQuery UI の Tooltip で入力欄にも画像にもツールチップ
- jQuery UI の Tooltip で作る画像用ツールチップ
- jQuery UI の Tooltip で、ボックス要素にツールチップを設定
- jQuery UI の Tooltip でアンカーテキストの真下に吹き出し風ツールチップを表示
- jQuery UI の Tooltip でアンカーテキストの下にツールチップ
- jQuery UI の Tooltip のツールチップをカーソルの右下に表示
- jQuery UI の Tooltip で入力欄の真下に吹き出し風ツールチップを表示
- jQuery UI の Tooltip のツールチップをサイズ変更アニメで表示/非表示
- jQuery UI の Tooltip のツールチップをクリップ開閉アニメで表示/非表示
- jQuery UI の Tooltip のツールチップを伸縮アニメーションで表示/非表示
- jQuery UI の Tooltip のツールチップを破裂アニメーションで表示/非表示
- jQuery UI の Tooltip のツールチップを横スライドで表示/非表示
- jQuery UI の Tooltip のツールチップを横スライドしながら透明/不透明
- jQuery UI の Tooltip のツールチップを縦スライドで表示/非表示
- jQuery UI の Tooltip で入力欄の下にツールチップを表示
- jQuery UI の Tooltip で入力欄の真下にツールチップを表示
- jQuery UI の Tooltip で入力欄の上にツールチップを表示
- jQuery UI 導入方法
- Accordion / アコーディオン
- AddClass / クラス追加
- Autocomplete / オートコンプリート
- Button / ボタン
- Datepicker / カレンダー
- Dialog / ダイアログ
- Draggable / ドラッグ移動
- Droppable / ドロップ
- Effects / エフェクト
- Hide / 非表示
- Menu / メニュー
- Position / 位置指定
- Progressbar / プログレス・バー
- RemoveClass / クラス削除
- Resizable / サイズ変更
- Selectable / 項目選択GUI
- Show / 表示
- Slider / スライダー
- Sortable / 並べ替え
- Spinner / スピナー
- SwitchClass / クラス切替
- Tabs / タブ
- Toggle / 表示切替
- ToggleClass / クラス切替
- Tooltip / ツールチップ
- jQuery UI 逆引きリファレンス