Skip to content

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

by : 2017/07/07

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

今回はDOMのソートです。

デモコードについて

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

HTMLについて

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

スタイルシートについて

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

JavaScriptについて

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

初期化処理

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

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

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


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

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

From → hifive, HTML5

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。