hifiveのUIライブラリ紹介「ドラッグ&ドロップ」
今回はWebのUIで見かけることが多くなってきたドラッグ&ドロップを実装する方法を紹介します。hifiveではなく、jQuery UIと組み合わせた方法になります。
実際に動くデモはこちらになります。
必要なライブラリ
ドラッグ&ドロップを行う際には次のライブラリを利用します。
HTML
HTMLは次のようになります。idをドラッグできるDOM、されるDOMにそれぞれ設定しておきます。
JavaScript
hifiveのコントローラの基本形は次のようになります。
まず初期化処理を行います。
このように記述することでドラッグできるDOMが作られ、マウスでドラッグできます。droppableはドロップできるDOMで、dropされた時にコールバック処理を呼び出します。
最後にドロップされた時のコールバックを記述します。
CSS
CSSは次のように記述しました。これはデザインに応じて変更してください。
これで完成です。
jQueryの記述に従っていますが、hifiveの中でコントロールできます。UIを自由に設定させたり、データを移動したりするような処理を作る際に使ってください。
今回のサンプルはこちらにあります。コードを確認する際に利用してください。
コメントは受け付けていません。