Skip to content

hifiveのUIライブラリの紹介「マグネットコンテナ」

by : 2016/07/22

hifiveで提供しているUIライブラリの一つ、マグネットコンテナの使い方を紹介します。

まずはサンプルです。

動作するデモはこちらにあります。DOMがドラッグ可能になっており、他のDOMの近くに持っていくと吸い付くようになっています。さらにくっついた時にハイライトする仕組みです。

必要なライブラリ

マグネットコンテナを実現するにはhifive本体の他に次のライブラリが必要になります。

HTMLの記述

まずHTMLを記述します。今回はdiv要素を並べており、後で色と配置を指定します。

色と配置の指定

次にスタイルシートで色と配置を指定します。すべてfloatで、positionもabsoluteになっています。後は各divごとにtop/leftで配置を指定しています。

JavaScriptのコード

では実際のコントローラのコードですが、これはとても簡単です。

これだけでマグネットコンテナが使えるようになります。 .magnet-wrapper は全体のクラスになります。

細かな動作の指定を行う場合についてはマグネットコンテナ サンプルを参考にしてください。簡易的に実現するのであれば こちらのデモ をご覧ください。

マグネットコンテナ サンプル

From → hifive

コメントは停止中です。

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