コンテンツへスキップ

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

by : 2017/07/05

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

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

デモコードについて

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

HTMLについて

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

<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>

view raw
index.js
hosted with ❤ by GitHub

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

#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;
}

view raw
index.html
hosted with ❤ by GitHub

JavaScriptについて

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

$(function() {
var controller = {
__name: 'Drag&DropController',
// 初期化処理
__ready: function() {
},
// 要素がドロップされた時のコールバック
drop: function(org, event, ui) {
},
// 要素が外れた時のコールバック
blur: function(org, event, ui) {
}
};
// コントローラの作成と要素へのバインド.
h5.core.controller('#container', controller);
});

view raw
index.css
hosted with ❤ by GitHub

初期化処理

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

// 初期化処理
__ready: function() {
var that = this;
$('#draggable').draggable();
$('#droppable').droppable({
drop: that.ownWithOrg(that.drop),
out: that.ownWithOrg(that.blur)
});
},

view raw
index.js
hosted with ❤ by GitHub

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

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

// 要素がドロップされた時のコールバック
drop: function(org, event, ui) {
$(org).addClass('ui-state-highlight').find('p').html('Dropped!');
},

view raw
index.js
hosted with ❤ by GitHub

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

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

// 要素が外れた時のコールバック
blur: function(org, event, ui) {
$(org).removeClass('ui-state-highlight').find('p').html('Drop here');
}

view raw
index.js
hosted with ❤ by GitHub


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

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

From → hifive, HTML5

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

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