hifiveとjQuery UIを組み合わせる【DOMの並び替え】

hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。

今回はDOMのソートです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各要素をドラッグして上下に移動したり、別なカラムにドロップできます。

HTMLについて

少し長いですがHTMLは次のようになります。portlet クラスごとに移動できます。

スタイルシートについて

スタイルシートはカラム部分の設定などになります。

JavaScriptについて

JavaScriptは次のようになります。まずは概要です。

初期化処理

hifiveのコントローラが初期化された段階でソートの設定を行います。ここではドロップした時のイベント（stop）だけ指定しています。

ドロップ時のコールバック

次にドロップを止めた時のイベントです。

このように実装することでhifiveとjQuery UIのソート機能をシームレスに連携させられるようになります。ダッシュボードであったり、ユーザが自分でコンテンツを自由に設定できるページを作るのに使えるのでぜひ参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。