コンテンツへスキップ

hifiveのUIライブラリ紹介「ドラッグ&ドロップ」

by : 2017/04/21

今回はWebのUIで見かけることが多くなってきたドラッグ&ドロップを実装する方法を紹介します。hifiveではなく、jQuery UIと組み合わせた方法になります。

実際に動くデモはこちらになります。

必要なライブラリ

ドラッグ&ドロップを行う際には次のライブラリを利用します。

HTML

HTMLは次のようになります。idをドラッグできるDOM、されるDOMにそれぞれ設定しておきます。


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

hosted with ❤ by GitHub

JavaScript

hifiveのコントローラの基本形は次のようになります。


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

view raw

index.js

hosted with ❤ by GitHub

まず初期化処理を行います。


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

view raw

index.js

hosted with ❤ by GitHub

このように記述することでドラッグできるDOMが作られ、マウスでドラッグできます。droppableはドロップできるDOMで、dropされた時にコールバック処理を呼び出します。

最後にドロップされた時のコールバックを記述します。


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

view raw

index.js

hosted with ❤ by GitHub

CSS

CSSは次のように記述しました。これはデザインに応じて変更してください。


#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.css

hosted with ❤ by GitHub

これで完成です。


jQueryの記述に従っていますが、hifiveの中でコントロールできます。UIを自由に設定させたり、データを移動したりするような処理を作る際に使ってください。

今回のサンプルはこちらにあります。コードを確認する際に利用してください。

banner_02

From → hifive

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

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