hifiveとjQuery UIを組み合わせる【ドラッグ&ドロップ】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回はドラッグ&ドロップです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。
HTMLについて
まずHTMLですが、次のようにドラッグするDOM（#draggable）とドロップされるDOM（#droppable）を定義します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"> | |
| <div id="draggable" class="ui-widget-content"> | |
| <p>Drag me to my target</p> | |
| </div> | |
| <div id="droppable" class="ui-widget-header"> | |
| <p>Drop here</p> | |
| </div> | |
| </div> |
各要素についてスタイルシートを付けます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #draggable { | |
| width: 100px; | |
| height: 100px; | |
| padding: 0.5em; | |
| float: left; | |
| margin: 10px 10px 10px 0; | |
| } | |
| #droppable { | |
| width: 150px; | |
| height: 150px; | |
| padding: 0.5em; | |
| float: left; | |
| margin: 10px; | |
| } |
JavaScriptについて
全体像は次のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var controller = { | |
| __name: 'Drag&DropController', | |
| // 初期化処理 | |
| __ready: function() { | |
| }, | |
| // 要素がドロップされた時のコールバック | |
| drop: function(org, event, ui) { | |
| }, | |
| // 要素が外れた時のコールバック | |
| blur: function(org, event, ui) { | |
| } | |
| }; | |
| // コントローラの作成と要素へのバインド. | |
| h5.core.controller('#container', controller); | |
| }); |
初期化処理
初期化処理ではDOM要素に対してドラッグ&ドロップの有効化、そしてコールバックの指定を行います。that.ownWithOrgを使うことでコントロール化したhifiveのメソッドで受けられるようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 初期化処理 | |
| __ready: function() { | |
| var that = this; | |
| $('#draggable').draggable(); | |
| $('#droppable').droppable({ | |
| drop: that.ownWithOrg(that.drop), | |
| out: that.ownWithOrg(that.blur) | |
| }); | |
| }, |
要素がドロップされた時のコールバック
ドロップされた際にはクラスを追加して、文字を変更します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 要素がドロップされた時のコールバック | |
| drop: function(org, event, ui) { | |
| $(org).addClass('ui-state-highlight').find('p').html('Dropped!'); | |
| }, |
要素が外れた時のコールバック
要素が外れた際にはクラスを外して、文字を元に戻します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 要素が外れた時のコールバック | |
| blur: function(org, event, ui) { | |
| $(org).removeClass('ui-state-highlight').find('p').html('Drop here'); | |
| } |
このように実装することでhifiveとjQuery UIのドラッグ&ドロップをシームレスに連携させられるようになります。タブレットやスマートフォンで使うと便利な機能なのでぜひ参考にしてください。
実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。
hifive開発者ブログ 
コメントは受け付けていません。