Skip to content

hifiveとjQuery UIを組み合わせる【ドラッグ&ドロップ】

by : 2017/07/05

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

今回はドラッグ&ドロップです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。

HTMLについて

まずHTMLですが、次のようにドラッグするDOM(#draggable)とドロップされるDOM(#droppable)を定義します。

各要素についてスタイルシートを付けます。

JavaScriptについて

全体像は次のようになります。

初期化処理

初期化処理ではDOM要素に対してドラッグ&ドロップの有効化、そしてコールバックの指定を行います。that.ownWithOrgを使うことでコントロール化したhifiveのメソッドで受けられるようになります。

要素がドロップされた時のコールバック

ドロップされた際にはクラスを追加して、文字を変更します。

要素が外れた時のコールバック

要素が外れた際にはクラスを外して、文字を元に戻します。


このように実装することでhifiveとjQuery UIのドラッグ&ドロップをシームレスに連携させられるようになります。タブレットやスマートフォンで使うと便利な機能なのでぜひ参考にしてください。

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

From → hifive, HTML5

現在コメントは受け付けていません。

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