コンテンツへスキップ

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

by : 2017/07/07

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

今回はDOMのソートです。

デモコードについて

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

HTMLについて

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

<div id="container" style="padding: 30px;">
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content" style="height: 320px;">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
</div>
<ul id="list" style="list-style: none;"></ul>
</div>

view raw
index.js
hosted with ❤ by GitHub

スタイルシートについて

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

.column {
width: 220px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
}
.portlet-header {
margin: 0.3em;
padding-bottom: 4px;
padding-left: 0.2em;
}
.portlet-header .ui-icon {
float: right;
}
.portlet-content {
padding: 0.4em;
}
.ui-sortable-placeholder {
border: 1px dotted black;
visibility: visible !important;
height: 50px !important;
}
.ui-sortable-placeholder * {
visibility: hidden;
}

view raw
index.html
hosted with ❤ by GitHub

JavaScriptについて

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

$(function() {
var controller = {
__name: 'SortableController',
// 初期化処理
__ready: function() {
},
// ドロップ時のコールバック
stop: function(event, ui) {
}
};
// コントローラの作成と要素へのバインド.
h5.core.controller('#container', controller);
});

view raw
index.css
hosted with ❤ by GitHub

初期化処理

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

__ready: function() {
var that = this;
$('.column').sortable({
connectWith: '.column',
stop: that.own(that.stop)
});
$('.portlet').addClass('ui-widget ui-widget-content ui-helper-clearfix ui-corner-all')
.find('.portlet-header').addClass('ui-widget-header ui-corner-all').prepend(
'<span class="ui-icon ui-icon-minusthick"></span>').end().find(
'.portlet-content');
$('.portlet-header .ui-icon').click(function() {
$(this).toggleClass('ui-icon-minusthick').toggleClass('ui-icon-plusthick');
$(this).parents('.portlet:first').find('.portlet-content').toggle();
});
$('.column').disableSelection();
},

view raw
index.js
hosted with ❤ by GitHub

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

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

stop: function(event, ui) {
var target = $(ui.item);
$('#list').append('<li>' + target.find('.portlet-header').text() + 'が移動しました。</li>');
}

view raw
index.js
hosted with ❤ by GitHub


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

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

From → hifive, HTML5

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

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