hifiveのUIライブラリ紹介「ドラッグ&ドロップ」
今回は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> |
JavaScript
hifiveのコントローラの基本形は次のようになります。
var controller = { | |
__name: 'Drag&DropController', | |
// 初期化処理 | |
__ready: function() { | |
}, | |
// 要素がドロップされた時のコールバック | |
drop: function(org, event, ui) { | |
} | |
}; | |
// コントローラの作成と要素へのバインド. | |
h5.core.controller('#container', controller); |
まず初期化処理を行います。
// 初期化処理 | |
__ready: function() { | |
var that = this; | |
$('#draggable').draggable(); | |
$('#droppable').droppable({ | |
drop: that.ownWithOrg(that.drop) | |
}); | |
}, |
このように記述することでドラッグできるDOMが作られ、マウスでドラッグできます。droppableはドロップできるDOMで、dropされた時にコールバック処理を呼び出します。
最後にドロップされた時のコールバックを記述します。
// 要素がドロップされた時のコールバック | |
drop: function(org, event, ui) { | |
$(org).addClass('ui-state-highlight').find('p').html('Dropped!'); | |
} |
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; | |
} |
これで完成です。
jQueryの記述に従っていますが、hifiveの中でコントロールできます。UIを自由に設定させたり、データを移動したりするような処理を作る際に使ってください。
今回のサンプルはこちらにあります。コードを確認する際に利用してください。
コメントは受け付けていません。