jQueryUIのui.sortable.jsを使ってボックスをドラッグ＆ドロップで入れ替える

実験

今後作成するページの為に練習をかねてモックアップを作ってみた

  • 最初の状態

  • 非同期に検索結果を表示

  • 所蔵している館はレのアイコン、していない館は×のアイコンを表示

  • ドラッグすることでボックスの入れ替えが可能（もちろん検索中でも）


今日学習した所

  • ui.sortable.jsが有効になるのはli要素
    • li要素の子にdiv要素を書くのって文法的にどうなのだろうか？
    • ドラッグ中に影を見せるのは.sortable({ hoverClass: 影用のクラス名 })なんて感じで指定することで可能だけど、ここで指定したクラス名はli要素に付加させるのでdiv要素を使う時には影のクラスのcssで幅を指定しておかないと酷いことになる＞＜
  • replaceWith(jQueryの)でイメージとかの要素を書き換える時は、イメージのそとにサイズ指定を指定したdivを作るようにしないとブラウザによっては描画のタイミングでページがグラグラする

今後の課題

  • それぞれにチェックボックスを付けて、チェックしてあるもののみ処理を行う
    • 多分簡単
  • 並び替えを行った状態や、チェックボックスの状態をクッキーに保存して次回ページを開いた時に反映させる
    • クッキーの読み書きを行う方法を調べる
    • データの持ち方を考える