jQueryUI:sortableとselectableの合わせ技

· by · in

See the Pen jQueryUI Sortable & Selectable by KaBuKi (@kabuki) on CodePen.

仕事で超久々にjQueryUIに触れたので自分用メモ。
久々にやると面白いですね。

要件

  1. リストをドラッグ＆ドロップで並び替えたい
  2. 複数選択して移動もしたい

これらを満たすため、jQueryUIのsortableとselectableの合わせ技で実現。

UIとして結構汎用性高くできたのと、これの実現までに日本語ドキュメントがゼロだったので書き残しておきます。

さらに一手間

sortableはドロップ先の空間をui-sortable-placeholderというクラスで1行分開けてくれます。

複数選択した時は選択してる塊の高さ分とっておきたいと思ったので、sortableのイベント時に高さを確保してui-sortable-placeholderに指定しています。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: ,