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

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

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