hifiveのUIライブラリの紹介「マグネットコンテナ」
hifiveで提供しているUIライブラリの一つ、マグネットコンテナの使い方を紹介します。
まずはサンプルです。
動作するデモはこちらにあります。DOMがドラッグ可能になっており、他のDOMの近くに持っていくと吸い付くようになっています。さらにくっついた時にハイライトする仕組みです。
必要なライブラリ
マグネットコンテナを実現するにはhifive本体の他に次のライブラリが必要になります。
HTMLの記述
まずHTMLを記述します。今回はdiv要素を並べており、後で色と配置を指定します。
色と配置の指定
次にスタイルシートで色と配置を指定します。すべてfloatで、positionもabsoluteになっています。後は各divごとにtop/leftで配置を指定しています。
JavaScriptのコード
では実際のコントローラのコードですが、これはとても簡単です。
これだけでマグネットコンテナが使えるようになります。 .magnet-wrapper は全体のクラスになります。
細かな動作の指定を行う場合についてはマグネットコンテナ サンプルを参考にしてください。簡易的に実現するのであれば こちらのデモ をご覧ください。
現在コメントは受け付けていません。