Skip to content

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

by : 2017/04/21

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

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

必要なライブラリ

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

HTML

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

JavaScript

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

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

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

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

CSS

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

これで完成です。


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

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

banner_02

From → hifive

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

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